/* ==========================================================================
   LottoKingdom - Lotto Balls & Animation Engine CSS
   Realistic 3D Spheres, Shading, Specular Highlights, and Drum Animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Realistic 3D Lotto Ball Base Styling
   -------------------------------------------------------------------------- */
.lotto-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  color: #111827;
  user-select: none;
  box-shadow: 
    inset -3px -5px 8px rgba(0, 0, 0, 0.45),
    inset 3px 5px 8px rgba(255, 255, 255, 0.6),
    0 5px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

/* Inner Specular Highlight Reflection */
.lotto-ball::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 20%;
  width: 35%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 80%);
  transform: rotate(-25deg);
  pointer-events: none;
}

/* Ball Sizes */
.lotto-ball-xs {
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
}

.lotto-ball-sm {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
}

.lotto-ball-md {
  width: 46px;
  height: 46px;
  font-size: 1.1rem;
}

.lotto-ball-lg {
  width: 58px;
  height: 58px;
  font-size: 1.45rem;
}

.lotto-ball-xl {
  width: 72px;
  height: 72px;
  font-size: 1.8rem;
}

/* --------------------------------------------------------------------------
   2. Ball Color Themes (Vibrant & Realistic)
   -------------------------------------------------------------------------- */
/* Red Ball */
.ball-red {
  background: radial-gradient(circle at 35% 30%, #ff6b6b 0%, #ee1b24 55%, #880006 100%);
  color: #ffffff;
}

/* Blue Ball */
.ball-blue {
  background: radial-gradient(circle at 35% 30%, #60a5fa 0%, #2563eb 55%, #1e3a8a 100%);
  color: #ffffff;
}

/* Green Ball */
.ball-green {
  background: radial-gradient(circle at 35% 30%, #4ade80 0%, #16a34a 55%, #14532d 100%);
  color: #ffffff;
}

/* Yellow/Gold Ball */
.ball-yellow, .ball-gold {
  background: radial-gradient(circle at 35% 30%, #fde047 0%, #eab308 55%, #a16207 100%);
  color: #111827;
}

/* Purple Ball */
.ball-purple {
  background: radial-gradient(circle at 35% 30%, #c084fc 0%, #9333ea 55%, #581c87 100%);
  color: #ffffff;
}

/* Orange Ball */
.ball-orange {
  background: radial-gradient(circle at 35% 30%, #fb923c 0%, #ea580c 55%, #7c2d12 100%);
  color: #ffffff;
}

/* Cyan/Aqua Ball */
.ball-cyan {
  background: radial-gradient(circle at 35% 30%, #67e8f9 0%, #06b6d4 55%, #155e75 100%);
  color: #111827;
}

/* Special Power / Bonus / Jackpot Ball */
.ball-bonus {
  background: radial-gradient(circle at 35% 30%, #f472b6 0%, #db2777 50%, #831843 100%);
  color: #ffffff;
  box-shadow: 
    inset -3px -5px 8px rgba(0, 0, 0, 0.45),
    inset 3px 5px 8px rgba(255, 255, 255, 0.6),
    0 0 16px rgba(236, 72, 153, 0.65);
}

.ball-power {
  background: radial-gradient(circle at 35% 30%, #fde68a 0%, #f59e0b 50%, #92400e 100%);
  color: #111827;
  box-shadow: 
    inset -3px -5px 8px rgba(0, 0, 0, 0.45),
    inset 3px 5px 8px rgba(255, 255, 255, 0.6),
    0 0 18px rgba(245, 158, 11, 0.7);
  animation: powerGlow 2s infinite alternate ease-in-out;
}

@keyframes powerGlow {
  0% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); }
  100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.95); }
}

/* --------------------------------------------------------------------------
   3. Interactive Ball Selector Grid Buttons
   -------------------------------------------------------------------------- */
.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
  padding: 10px 0;
}

@media (max-width: 576px) {
  .number-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
}

.number-btn {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 48px;
  border-radius: 50%;
  border: 1px solid var(--lk-border-color);
  background: var(--lk-bg-surface-elevated);
  color: var(--lk-text-main);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.number-btn:hover {
  transform: translateY(-2px) scale(1.08);
  border-color: var(--lk-primary);
  background: var(--lk-primary-light);
  color: var(--lk-primary);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}

.number-btn.selected {
  background: var(--lk-grad-primary);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.6);
  transform: scale(1.12);
  animation: selectPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.number-btn.bonus-selected {
  background: var(--lk-grad-gold);
  color: #111827;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.7);
  transform: scale(1.12);
  animation: selectPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes selectPop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1.12); }
}

/* Hot / Cold / Overdue Micro Badges */
.number-btn .stat-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.6rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--lk-radius-full);
  pointer-events: none;
}

.stat-hot {
  background: #ef4444;
  color: #ffffff;
}

.stat-cold {
  background: #06b6d4;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Live Drawing Stage & Tumbler Physics Animations
   -------------------------------------------------------------------------- */
.drum-ball {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.4), inset 2px 3px 4px rgba(255, 255, 255, 0.5);
  transition: transform 0.1s linear;
}

/* Ball Reveal & Pop Animation */
.ball-pop-reveal {
  animation: ballReveal 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ballReveal {
  0% {
    opacity: 0;
    transform: translateY(-80px) scale(0.2) rotate(-180deg);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) scale(1.2) rotate(15deg);
  }
  80% {
    transform: translateY(-4px) scale(0.95) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Ball Tumble in Drum Animation */
@keyframes tumble1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(60px, -40px) rotate(90deg); }
  50% { transform: translate(20px, -80px) rotate(180deg); }
  75% { transform: translate(-50px, -30px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes tumble2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-50px, -50px) rotate(-90deg); }
  50% { transform: translate(30px, -70px) rotate(-180deg); }
  75% { transform: translate(40px, -20px) rotate(-270deg); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}

.tumble-anim-1 {
  animation: tumble1 1.2s infinite ease-in-out;
}

.tumble-anim-2 {
  animation: tumble2 0.9s infinite ease-in-out;
}