:root{
  --size: 50px; /* change this to scale all balls */
  --cue-size: 200px;
}

/* container */
.balls{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }

.cue_balls{
	display:unset !important;
	text-align: center;
}

/* common ball style */
.fball, .ball{
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  position:relative;
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.02);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  transform: translateZ(0); /* promote to own layer */
}

.cue_ball{
  width: var(--cue-size);
  height: var(--cue-size);
  border-radius:50%;
  position:relative;
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.02);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  transform: translateZ(0); /* promote to own layer */
  text-decoration: none;
  transition: all 0.8s;
}

/* soft circular specular highlight (top-left) */
.cue_ball::before, .fball::before, .ball::before{
  content:"";
  position:absolute;
  left:14%;
  top:12%;
  width:36%;
  height:26%;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.25) 35%, rgba(255,255,255,0.05) 60%, transparent 70%);
  filter: blur(1px);
  mix-blend-mode: screen;
  pointer-events:none;
}

/* small glossy reflection (lower-right) */
.cue_ball::after, .fball::after, .ball::after{
  content:"";
  position:absolute;
  right:10%;
  bottom:8%;
  width:26%;
  height:14%;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02));
  transform: rotate(-12deg);
  pointer-events:none;
}

/* number badge (center white circle with number) */
.cue_ball .num{
  width: 40%;
  height: 40%;
  border-radius:50%;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family: "Orbitron", sans-serif;
  font-size: calc(var(--size) * 0.26);
  color:#222;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.25);
  z-index:2;
  user-select:none;
}

.fball .num, .ball .num{
  width:36%;
  height:36%;
  border-radius:50%;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-family: "Orbitron", sans-serif;
  font-size: calc(var(--size) * 0.26);
  color:#222;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.25);
  z-index:2;
  user-select:none;
}

/* --- Colors for snooker (solids) --- */
/* Reds (there are 15 reds, but we show one) */
.red{ background: radial-gradient(circle at 30% 25%, #ff7b7b, #cc2020 65%); }

/* Yellow */
.yellow{ background: radial-gradient(circle at 30% 25%, #fff28a, #e2c849 65%); }
.yellow .num{ color:#222; }

/* Green */
.green{ background: radial-gradient(circle at 30% 25%, #9fe49f, #2c9a39 65%); }
.green .num{ color:#000; }

/* Brown */
.brown{ background: radial-gradient(circle at 30% 25%, #d4b48a, #6d3c1a 65%); }
.brown .num{ color:#000; }

/* Blue */
.blue{ background: radial-gradient(circle at 30% 25%, #9bc9ff, #196fbf 65%); }
.blue .num{ color:#000; }

/* Pink */
.pink{ background: radial-gradient(circle at 30% 25%, #ffc1e0, #e85fa0 65%); }
.pink .num{ color:#000; }

/* Black */
.black{ background: radial-gradient(circle at 30% 25%, #6b6b6b, #000 65%); }
.black .num{ color:#000; }

/* Cue (white) */
.cue{ background: radial-gradient(circle at 30% 25%, #ffffff, #d9d9d9 80%); }
.cue .num{ background:#fff; color:#111; font-weight:600; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12); }

/* optional: softly pulsing shadow to make them 'alive' */
.fball, .ball { transition: transform .18s ease; }
.fball:hover, .ball:hover{ transform: translateY(-6px) scale(1.05); }

/* responsive: scale down on small screens */
@media (max-width:440px){
	:root{ 
		--size: 39px !important;
		--cue-size: 200px !important;
	}
}