/* Pool ball styling */

/* Ball color definitions */
:root {
  --ball-1: #f7dc6f;  /* Yellow */
  --ball-2: #3498db;  /* Blue */
  --ball-3: #e74c3c;  /* Red */
  --ball-4: #8e44ad;  /* Purple */
  --ball-5: #e67e22;  /* Orange */
  --ball-6: #27ae60;  /* Green */
  --ball-7: #922b21;  /* Maroon */
  --ball-8: #1a1a1a;  /* Black */
  --ball-9: #f7dc6f;  /* Yellow stripe */
  --ball-10: #3498db; /* Blue stripe */
  --ball-11: #e74c3c; /* Red stripe */
  --ball-12: #8e44ad; /* Purple stripe */
  --ball-13: #e67e22; /* Orange stripe */
  --ball-14: #27ae60; /* Green stripe */
  --ball-15: #922b21; /* Maroon stripe */
  --ball-cue: #f5f5f5; /* Cue ball (white) */
}

/* Ball base styling (for non-canvas fallback or UI elements) */
.ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow:
    2px 4px 6px rgba(0, 0, 0, 0.4),
    inset -3px -3px 6px rgba(0, 0, 0, 0.3),
    inset 3px 3px 6px rgba(255, 255, 255, 0.2);
}

/* 3D sphere effect via gradient overlay */
.ball::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  border-radius: 50%;
}

/* Solid balls 1-7 */
.ball-1 { background: var(--ball-1); color: #333; }
.ball-2 { background: var(--ball-2); }
.ball-3 { background: var(--ball-3); }
.ball-4 { background: var(--ball-4); }
.ball-5 { background: var(--ball-5); }
.ball-6 { background: var(--ball-6); }
.ball-7 { background: var(--ball-7); }
.ball-8 { background: var(--ball-8); }

/* Stripe balls 9-15 - white background with colored stripe */
.ball-9, .ball-10, .ball-11, .ball-12, .ball-13, .ball-14, .ball-15 {
  background: #f5f5f5;
  overflow: hidden;
}

.ball-9::after,
.ball-10::after,
.ball-11::after,
.ball-12::after,
.ball-13::after,
.ball-14::after,
.ball-15::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  height: 50%;
}

.ball-9::after { background: var(--ball-9); }
.ball-10::after { background: var(--ball-10); }
.ball-11::after { background: var(--ball-11); }
.ball-12::after { background: var(--ball-12); }
.ball-13::after { background: var(--ball-13); }
.ball-14::after { background: var(--ball-14); }
.ball-15::after { background: var(--ball-15); }

/* Ball number circle for stripes */
.ball-9 .number,
.ball-10 .number,
.ball-11 .number,
.ball-12 .number,
.ball-13 .number,
.ball-14 .number,
.ball-15 .number {
  position: relative;
  z-index: 1;
  background: #fff;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #333;
}

/* Mini ball display (for selection UI) */
.ball-mini {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.ball-mini::before {
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
}

/* Ball drop animation */
@keyframes ballDrop {
  0% {
    transform: translateY(-100px) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    transform: translateY(10px) scale(1.1);
  }
  85% {
    transform: translateY(-5px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.ball-dropping {
  animation: ballDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}