:root {
  /* Backgrounds */
  --bg-main: #05012B;
  --bg-panel: #081346;
  --bg-card: #1B253A;
  --bg-secondary: #20264B;

  /* Primary Accents */
  --blue-neon: #00BFFF;
  --cyan-glow: #00E5FF;
  --blue-soft: #8FD9FF;

  /* Prediction Colors */
  --color-green: #00FF88;
  --color-red: #FF3B3B;
  --color-violet: #9B5CFF;

  /* Gold / Rewards */
  --gold-main: #FFC83D;
  --gold-deep: #FFB703;

  /* Text */
  --text-white: #FFFFFF;
  --text-muted: #C7D2E0;
}

/* Base styles for dark casino theme */
body {
  background-color: var(--bg-main);
  color: var(--text-white);
  font-family: 'Signika Negative', sans-serif;
}

/* Glassmorphism effect for cards */
.glass-card {
  background: rgba(27, 37, 58, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card-enhanced {
  background: linear-gradient(135deg, rgba(27, 37, 58, 0.7), rgba(32, 38, 75, 0.7));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 191, 255, 0.2);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(0, 191, 255, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
}

.glass-card-enhanced:hover {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(0, 191, 255, 0.2),
    0 0 20px rgba(0, 191, 255, 0.3);
  transform: translateY(-5px);
}

/* Prediction Buttons */
.prediction-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.prediction-btn.green {
  background-color: var(--color-green);
  color: #000;
  box-shadow: 0 0 8px var(--color-green);
}

.prediction-btn.red {
  background-color: var(--color-red);
  color: #fff;
  box-shadow: 0 0 8px var(--color-red);
}

.prediction-btn.violet {
  background-color: var(--color-violet);
  color: #fff;
  box-shadow: 0 0 8px var(--color-violet);
}

/* Active/Glow effect */
.prediction-btn.active {
  box-shadow: 0 0 12px var(--cyan-glow);
  transform: scale(1.05);
}

/* Hover effect */
.prediction-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--cyan-glow);
}

/* Winning pulse animation */
@keyframes winPulse {
  0% { box-shadow: 0 0 5px var(--gold-main); }
  50% { box-shadow: 0 0 20px var(--gold-main); }
  100% { box-shadow: 0 0 5px var(--gold-main); }
}

.prediction-btn.winning {
  animation: winPulse 1s infinite;
  border: 2px solid var(--gold-main);
}

/* Number Balls (0-9) */
.number-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.number-ball:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px var(--cyan-glow);
}

/* Individual number ball colors */
.number-ball.num-0 { background-color: var(--color-green); color: #000; }
.number-ball.num-1 { background-color: var(--color-red); color: #fff; }
.number-ball.num-2 { background-color: var(--color-green); color: #000; }
.number-ball.num-3 { background-color: var(--color-red); color: #fff; }
.number-ball.num-4 { background-color: var(--color-green); color: #000; }
.number-ball.num-5 { background-color: var(--color-red); color: #fff; }
.number-ball.num-6 { background-color: var(--color-green); color: #000; }
.number-ball.num-7 { background-color: var(--color-red); color: #fff; }
.number-ball.num-8 { background-color: var(--color-green); color: #000; }
.number-ball.num-9 { background-color: var(--color-red); color: #fff; }

/* Winning Result Highlight */
.winning-result {
  animation: winPulse 2s infinite;
  border: 2px solid var(--gold-main);
  border-radius: 8px;
  background: linear-gradient(45deg, var(--gold-main), var(--gold-deep));
  color: #000;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  box-shadow: 0 0 15px var(--gold-main);
}

.winning-number {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--gold-main), var(--gold-deep));
  color: #000;
  font-weight: bold;
  font-size: 24px;
  line-height: 50px;
  margin: 5px;
  box-shadow: 0 0 15px var(--gold-main);
  animation: winPulse 1.5s infinite;
}

/* Countdown Timer */
.countdown-timer {
  background: var(--bg-card);
  color: var(--text-white);
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--blue-neon);
}

.countdown-timer.warning {
  color: var(--color-red);
  border-color: var(--color-red);
  box-shadow: 0 0 15px var(--color-red);
  animation: pulseRed 1s infinite;
}

@keyframes pulseRed {
  0% { box-shadow: 0 0 5px var(--color-red); }
  50% { box-shadow: 0 0 20px var(--color-red); }
  100% { box-shadow: 0 0 5px var(--color-red); }
}

/* Wallet Balance & Win Amount */
.wallet-balance {
  background: var(--bg-card);
  color: var(--text-white);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--blue-soft);
}

.win-amount {
  background: linear-gradient(45deg, var(--gold-main), var(--gold-deep));
  color: #000;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 0 15px var(--gold-main);
  animation: winPulse 2s infinite;
}

.balance-positive {
  color: var(--color-green);
}

.balance-negative {
  color: var(--color-red);
}

/* Bet History Rows */
.bet-history-row {
  background: var(--bg-card);
  border-bottom: 1px solid var(--bg-secondary);
  padding: 12px;
  transition: all 0.3s ease;
}

.bet-history-row:hover {
  background: var(--bg-secondary);
  transform: translateX(5px);
}

.bet-history-row.win {
  border-left: 4px solid var(--color-green);
}

.bet-history-row.loss {
  border-left: 4px solid var(--color-red);
}

.bet-history-row.pending {
  border-left: 4px solid var(--blue-neon);
}

.bet-amount {
  font-weight: bold;
}

.bet-amount.win {
  color: var(--color-green);
}

.bet-amount.loss {
  color: var(--color-red);
}

.bet-game-type {
  background: var(--bg-panel);
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* VIP/Crown/Bonus UI Elements */
.vip-badge {
  background: linear-gradient(45deg, var(--gold-main), var(--gold-deep));
  color: #000;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 8px var(--gold-main);
}

.crown-icon {
  color: var(--gold-main);
  margin-right: 4px;
  text-shadow: 0 0 5px var(--gold-deep);
}

.bonus-tag {
  background: var(--blue-neon);
  color: #000;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 10px;
  box-shadow: 0 0 8px var(--blue-neon);
}

.vip-level-platinum {
  background: linear-gradient(45deg, #e5e4e2, #c0c0c0);
  color: #000;
}

.vip-level-gold {
  background: linear-gradient(45deg, var(--gold-main), var(--gold-deep));
  color: #000;
}

.vip-level-silver {
  background: linear-gradient(45deg, #c0c0c0, #a9a9a9);
  color: #000;
}

.vip-level-bronze {
  background: linear-gradient(45deg, #cd7f32, #a0522d);
  color: #000;
}

/* Glow Effects and Hover States */
.glow-effect {
  box-shadow: 0 0 12px var(--cyan-glow);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow:hover {
  box-shadow: 0 0 15px var(--cyan-glow);
}

/* Enhanced hover effects for all interactive elements */
.prediction-btn:hover,
.number-ball:hover,
.vip-badge:hover,
.bonus-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--cyan-glow);
  transition: all 0.3s ease;
}

/* Focus states for accessibility */
.prediction-btn:focus,
.number-ball:focus {
  outline: 2px solid var(--cyan-glow);
  outline-offset: 2px;
}