/* Glossy 3D Lottery Ball Styles */
.glossy-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(250, 250, 255, 0.7) 0%, rgba(240, 240, 250, 0.8) 100%);
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
  margin: 20px 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Dark mode container */
.dark-theme .glossy-container {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 3D Ball Base Style with reduced glossiness */
.ball-glossy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 1;
  overflow: hidden;
}

/* Subtle shine effect - reduced highlight */
.ball-glossy::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 40%;
  height: 40%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(255, 255, 255, 0) 70%
  );
  border-radius: 50%;
  transform: rotate(-30deg);
}

/* Very subtle secondary highlight */
.ball-glossy::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 15%;
  height: 15%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0) 70%
  );
  border-radius: 50%;
  transform: rotate(30deg);
}

/* Hover effect - more subtle */
.ball-glossy:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Special number styling - Darker Gold color */
.ball-glossy.special {
  /* Match size with regular balls */
  width: 60px;
  height: 60px;
  font-size: 26px;
  /* Darker gold color */
  background-color: #d4af37 !important;
  background-image: none !important;
  background: #d4af37 !important;
  /* Match shadow style with regular balls */
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 5px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Gold ball specific highlight - very subtle */
.ball-glossy.special::before {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0) 60%
  );
  width: 30%;
  height: 30%;
}

/* Special gold ball after element */
.ball-glossy.special::after {
  width: 10%;
  height: 10%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0) 70%
  );
}

.ball-glossy.special:hover {
  /* Match hover effect with regular balls */
  transform: translateY(-2px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #d4af37 !important;
}

/* Plus sign styling */
.glossy-plus {
  font-size: 36px;
  font-weight: bold;
  color: rgba(139, 92, 246, 0.8);
  margin: 0 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark-theme .glossy-plus {
  color: rgba(139, 92, 246, 0.9);
}

/* Special number container */
.glossy-special-container {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

/* Red balls */
.ball-glossy[data-number="1"],
.ball-glossy[data-number="2"],
.ball-glossy[data-number="7"],
.ball-glossy[data-number="8"],
.ball-glossy[data-number="12"],
.ball-glossy[data-number="13"],
.ball-glossy[data-number="18"],
.ball-glossy[data-number="19"],
.ball-glossy[data-number="23"],
.ball-glossy[data-number="24"],
.ball-glossy[data-number="29"],
.ball-glossy[data-number="30"],
.ball-glossy[data-number="34"],
.ball-glossy[data-number="35"],
.ball-glossy[data-number="40"],
.ball-glossy[data-number="45"],
.ball-glossy[data-number="46"] {
  background: radial-gradient(circle at 30% 30%, #f87171 0%, #dc2626 50%, #991b1b 100%);
}

/* Blue balls */
.ball-glossy[data-number="3"],
.ball-glossy[data-number="4"],
.ball-glossy[data-number="9"],
.ball-glossy[data-number="10"],
.ball-glossy[data-number="14"],
.ball-glossy[data-number="15"],
.ball-glossy[data-number="20"],
.ball-glossy[data-number="25"],
.ball-glossy[data-number="26"],
.ball-glossy[data-number="31"],
.ball-glossy[data-number="36"],
.ball-glossy[data-number="37"],
.ball-glossy[data-number="41"],
.ball-glossy[data-number="42"],
.ball-glossy[data-number="47"],
.ball-glossy[data-number="48"] {
  background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #2563eb 50%, #1e40af 100%);
}

/* Green balls */
.ball-glossy[data-number="5"],
.ball-glossy[data-number="6"],
.ball-glossy[data-number="11"],
.ball-glossy[data-number="16"],
.ball-glossy[data-number="17"],
.ball-glossy[data-number="21"],
.ball-glossy[data-number="22"],
.ball-glossy[data-number="27"],
.ball-glossy[data-number="28"],
.ball-glossy[data-number="32"],
.ball-glossy[data-number="33"],
.ball-glossy[data-number="38"],
.ball-glossy[data-number="39"],
.ball-glossy[data-number="43"],
.ball-glossy[data-number="44"],
.ball-glossy[data-number="49"] {
  background: radial-gradient(circle at 30% 30%, #34d399 0%, #059669 50%, #065f46 100%);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .glossy-container {
    padding: 16px;
    gap: 12px;
  }

  .ball-glossy {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .ball-glossy.special {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .glossy-plus {
    font-size: 28px;
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .glossy-container {
    padding: 12px;
    gap: 8px;
  }

  .ball-glossy {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .ball-glossy.special {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .glossy-plus {
    font-size: 24px;
  }
}