/* Shared 90-ball presentation: the same letter bands as the ticket columns. */
.bingo-sphere { --ball-color: #373b41; }
.bingo-sphere.bingo-sphere.bingo-sphere {
  container-type: inline-size;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  color: #25292c;
  background: radial-gradient(ellipse at 25% 14%, #fff 0%, rgba(255,255,255,.8) 6%, transparent 17%),
    radial-gradient(circle at 35% 30%, transparent 38%, rgba(0,0,0,.8) 100%), var(--ball-color);
  box-shadow: inset 3px 3px 5px rgba(255,255,255,.8), inset -5px -6px 10px rgba(0,0,0,.55), 0 7px 12px rgba(0,0,0,.28);
  text-shadow: none;
  flex-shrink: 0;
  animation: none;
  overflow: hidden;
}
.bingo-sphere:not(.player-reference-recent-ball) { position: relative; }
.bingo-sphere.ball-group-B { --ball-color: #008ae5; }
.bingo-sphere.ball-group-I { --ball-color: #e73247; }
.bingo-sphere.ball-group-N { --ball-color: #12ba40; }
.bingo-sphere.ball-group-G { --ball-color: #ff9a00; }
.bingo-sphere.ball-group-O { --ball-color: #56595c; }
.bingo-sphere::before {
  content: ''; position: absolute; top: 9%; left: 10%; width: 76%; height: 76%; border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff 25%, #f6f7f8 58%, #bec4c9 100%);
  box-shadow: 1px 2px 3px rgba(0,0,0,.15);
}
.bingo-sphere.bingo-sphere > small,
.bingo-sphere.bingo-sphere > strong {
  position: absolute; left: 10%; width: 76%; margin: 0; padding: 0;
  display: block; z-index: 1; color: #25292c; opacity: 1;
  font-family: Arial, sans-serif; font-weight: 900; line-height: 1;
  text-align: center; text-shadow: none; letter-spacing: -.03em;
}
.bingo-sphere.bingo-sphere > small { top: 17%; font-size: 10px; font-size: 18cqw; }
.bingo-sphere.bingo-sphere > strong { top: 37%; font-size: 22px; font-size: 39cqw; }
.player-reference-recent-0.bingo-sphere > strong { font-size: 40px; font-size: 39cqw; }
.last-ball.bingo-sphere > strong { font-size: 40px; font-size: 39cqw; }
.last-ball.bingo-sphere > small { font-size: 17px; font-size: 18cqw; }
.hub-ball-trail .bingo-sphere { width: 36px; height: 36px; }
.hub-ball-trail .bingo-sphere > strong { font-size: 14px; font-size: 39cqw; }
.hub-ball-trail .bingo-sphere > small { font-size: 7px; font-size: 18cqw; }
.recent .bingo-sphere { width: 42px; height: 42px; }
.recent .bingo-sphere > strong { font-size: 16px; font-size: 39cqw; }
.recent .bingo-sphere > small { font-size: 8px; font-size: 18cqw; }
.recent { flex-wrap: wrap; }
.bingo-sphere.is-empty { --ball-color: #7d8794; }