.ball {
  fill: none;
  stroke: #000;
  stroke-width: 0.002;
}

.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-1,
.traj-1 {
  stroke: #ffd900;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* We ensure any colored strokes are reset to black for threecushion */
.threecushion .ball,
.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;
}