.bingo-line {
  position: absolute;
  display: block;
  border: 0;
  border-radius: 999px;
  background: rgba(218, 76, 67, .72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72), 0 2px 5px rgba(91, 34, 29, .16);
  opacity: .62;
}

.bingo-lines {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.bingo-line.row { left: -1%; top: var(--line-position); width: 102%; transform: translateY(-50%); }
.bingo-line.column { top: -1%; left: var(--line-position); height: 102%; transform: translateX(-50%); }
.bingo-line.diagonal-down,
.bingo-line.diagonal-up { left: -21%; top: 50%; width: 142%; transform-origin: center; }
.bingo-line.diagonal-down { transform: rotate(45deg); }
.bingo-line.diagonal-up { transform: rotate(-45deg); }

.bingo-lines.dense .bingo-line { opacity: .55; box-shadow: none; }

.bingo-line.row,
.bingo-line.diagonal-down,
.bingo-line.diagonal-up {
  height: 2px;
  background: linear-gradient(90deg, transparent 0, rgba(218,76,67,.75) 3%, rgba(218,76,67,.75) 97%, transparent 100%);
}

.bingo-line.column {
  width: 2px;
  background: linear-gradient(180deg, transparent 0, rgba(218,76,67,.75) 3%, rgba(218,76,67,.75) 97%, transparent 100%);
}

.history-mini-lines { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }

.bingo-lines.dense .bingo-line.row,
.bingo-lines.dense .bingo-line.diagonal-down,
.bingo-lines.dense .bingo-line.diagonal-up { height: 1.5px; }
.bingo-lines.dense .bingo-line.column { width: 1.5px; }
.mini-bingo-line {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(218, 76, 67, .7);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.7);
}

.mini-bingo-line.row { left: -1%; top: var(--line-position); width: 102%; transform: translateY(-50%); }
.mini-bingo-line.column { top: -1%; left: var(--line-position); height: 102%; transform: translateX(-50%); }
.mini-bingo-line.diagonal-down,
.mini-bingo-line.diagonal-up { left: -21%; top: 50%; width: 142%; transform-origin: center; }
.mini-bingo-line.diagonal-down { transform: rotate(45deg); }
.mini-bingo-line.diagonal-up { transform: rotate(-45deg); }

.mini-bingo-line.row,
.mini-bingo-line.diagonal-down,
.mini-bingo-line.diagonal-up {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(218,76,67,.72) 4%, rgba(218,76,67,.72) 96%, transparent);
}

.mini-bingo-line.column {
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(218,76,67,.72) 4%, rgba(218,76,67,.72) 96%, transparent);
}

@media (max-width: 700px) {
  .bingo-line.row,
  .bingo-line.diagonal-down,
  .bingo-line.diagonal-up { height: 2px; }
  .bingo-line.column { width: 2px; }
  .mini-bingo-line.row,
  .mini-bingo-line.diagonal-down,
  .mini-bingo-line.diagonal-up { height: 1.5px; }
  .mini-bingo-line.column { width: 1.5px; }
}