.ball {
  fill: var(--ball-fill, none);
  stroke: var(--ball-stroke, #000);
  stroke-width: 0.002;
  filter: drop-shadow(0px 0.002px 0.004px rgba(0, 0, 0, 0.9));
}

.trajectory-line {
  fill: none;
  stroke: #000;
  stroke-width: 0.002;
  stroke-opacity: 0.5;
}

.traj-0 {
  stroke-opacity: 1;
}

.traj-1 {
  stroke-opacity: 0.75;
}

/* Default / Pool Colors */
.ball-0 {
  --ball-fill: #fff !important;
  --ball-stroke: #000;
}

.ball-1 {
  --ball-stroke: #ffd900;
}

.traj-1 {
  stroke: #ffd900;
}

.ball-2 {
  --ball-stroke: #00f;
}

.traj-2 {
  stroke: #00f;
}

.ball-3 {
  --ball-stroke: #f00;
}

.traj-3 {
  stroke: #f00;
}

.ball-4 {
  --ball-stroke: #800080;
}

.traj-4 {
  stroke: #800080;
}

.ball-5 {
  --ball-stroke: #f30;
}

.traj-5 {
  stroke: #f30;
}

.ball-6 {
  --ball-stroke: #008000;
}

.traj-6 {
  stroke: #008000;
}

.ball-7 {
  --ball-stroke: #600;
}

.traj-7 {
  stroke: #600;
}

.ball-8 {
  --ball-stroke: #000;
}

.traj-8 {
  stroke: #000;
}

.ball-9 {
  --ball-stroke: #ff0;
}

.traj-9 {
  stroke: #ff0;
}

.ball-10 {
  --ball-stroke: #00f;
}

.traj-10 {
  stroke: #00f;
}

.ball-11 {
  --ball-stroke: #f00;
}

.traj-11 {
  stroke: #f00;
}

.ball-12 {
  --ball-stroke: #800080;
}

.traj-12 {
  stroke: #800080;
}

.ball-13 {
  --ball-stroke: #f80;
}

.traj-13 {
  stroke: #f80;
}

.ball-14 {
  --ball-stroke: #008000;
}

.traj-14 {
  stroke: #008000;
}

.ball-15 {
  --ball-stroke: #600;
}

.traj-15 {
  stroke: #600;
}

/* Snooker Overrides */
.snooker .ball-1 {
  --ball-stroke: #ffd700;
}

.snooker .traj-1 {
  stroke: #ffd700;
}

.snooker .ball-2 {
  --ball-stroke: #008000;
}

.snooker .traj-2 {
  stroke: #008000;
}

.snooker .ball-3 {
  --ball-stroke: #6a2500;
}

.snooker .traj-3 {
  stroke: #6a2500;
}

.snooker .ball-4 {
  --ball-stroke: #005cb1;
}

.snooker .traj-4 {
  stroke: #005cb1;
}

.snooker .ball-5 {
  --ball-stroke: #ff80b3;
}

.snooker .traj-5 {
  stroke: #ff80b3;
}

.snooker .ball-6 {
  --ball-stroke: #010000;
}

.snooker .traj-6 {
  stroke: #010000;
}

.snooker .ball-7,
.snooker .ball-8,
.snooker .ball-9,
.snooker .ball-10,
.snooker .ball-11,
.snooker .ball-12,
.snooker .ball-13,
.snooker .ball-14,
.snooker .ball-15,
.snooker .ball-16,
.snooker .ball-17,
.snooker .ball-18,
.snooker .ball-19,
.snooker .ball-20,
.snooker .ball-21 {
  --ball-stroke: #e00;
}

.snooker .traj-7,
.snooker .traj-8,
.snooker .traj-9,
.snooker .traj-10,
.snooker .traj-11,
.snooker .traj-12,
.snooker .traj-13,
.snooker .traj-14,
.snooker .traj-15,
.snooker .traj-16,
.snooker .traj-17,
.snooker .traj-18,
.snooker .traj-19,
.snooker .traj-20,
.snooker .traj-21 {
  stroke: #e00;
}

/* Sagu Overrides: 4-ball carom -- balls 2 & 3 are red object balls */
.sagu .ball {
  --ball-stroke: #000;
}

.sagu .trajectory-line {
  stroke: #000;
}

.sagu .ball-1 {
  --ball-stroke: #ffd700;
}

.sagu .traj-1 {
  stroke: #ffd700;
}

.sagu .ball-2,
.sagu .ball-3 {
  --ball-stroke: #f00;
}

.sagu .traj-2,
.sagu .traj-3 {
  stroke: #f00;
}

/* Three-Cushion Overrides: remain as it was (no colour) */

/* We ensure any colored strokes are reset to black for threecushion */
.threecushion .ball {
  --ball-stroke: #000;
}

.threecushion .trajectory-line {
  stroke: #000;
}

/* SVG Diagram Shared Styles */
.table-stroke {
  fill: none;
  stroke: #000;
  stroke-width: 0.004;
}

.grid-line {
  stroke: #ccc;
  stroke-width: 0.002;
  stroke-dasharray: 0.008 0.008;
}

.manual-line {
  fill: none;
  stroke: #4f4f4f;
  stroke-width: 0.001;
  stroke-dasharray: 0.06 0.03;
}

.fine-stroke {
  fill: none;
  stroke: #000;
  stroke-width: 0.001;
}

.worker-status {
  pointer-events: none;
  user-select: none;
}