/**
  * CSS for LOTO balls.
  * div.balls div.ball,ball-color span.
  */
.balls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.ball {
  --size: 72px;
  --color: #dd2f2f;

  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);
  border-radius: 50%;

  background:
    radial-gradient(ellipse 14px 8px at 50% 0%,
      #fff 98%,
      transparent 100%),
    radial-gradient(ellipse 8px 14px at 100% 50%,
      #fff 98%,
      transparent 100%),
    radial-gradient(ellipse 14px 8px at 50% 100%,
      #fff 98%,
      transparent 100%),
    radial-gradient(ellipse 8px 14px at 0% 50%,
      #fff 98%,
      transparent 100%),
    var(--color);

  box-shadow:
    inset 4px 5px 8px rgba(255, 255, 255, 0.35),
    inset -5px -7px 10px rgba(0, 0, 0, 0.2),
    0 5px 6px rgba(0, 0, 0, 0.18);
}

.ball span {
  position: absolute;
  inset: 18%;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #f5f5f5);

  color: #777;
  font-family: Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;

  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}

.ball-red {
  --color: #dd2f2f;
}

.ball-purple {
  --color: #c13db9;
}

.ball-yellow {
  --color: #efb80c;
}

.ball-blue {
  --color: #5675bd;
}

.ball-orange {
  --color: #e9852e;
}

.ball-green {
  --color: #53bf64;
}