.dab {
  max-width: 760px;
  --dab-dot: 9px;
  --dab-p0: var(--accent);
  --dab-p1: var(--player-two);
}

.dab-score {
  margin-bottom: 1rem;
  color: var(--fg-muted);
  font-size: 0.95rem;
}

.dab-board {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.dab-row {
  display: flex;
}

.dab-row--lines {
  align-items: center;
}

.dab-dot {
  flex: 0 0 var(--dab-dot);
  height: var(--dab-dot);
  background: var(--fg);
  border-radius: 50%;
}

.dab-edge {
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fg-muted);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.15s;
}

.dab-edge--h {
  flex: 1 1 0;
  height: var(--dab-dot);
  min-width: 0;
  margin: 0 2px;
}

.dab-edge--v {
  flex: 0 0 var(--dab-dot);
  margin: 2px 0;
}

.dab-edge:hover:not(:disabled) {
  opacity: 0.7;
}

.dab-edge:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.dab-edge:disabled {
  cursor: default;
}

.dab-edge[data-player] {
  opacity: 1;
}

.dab-edge[data-player="0"] {
  background: var(--dab-p0);
}

.dab-edge[data-player="1"] {
  background: var(--dab-p1);
}

.dab-edge--last {
  box-shadow: 0 0 0 2px var(--fg);
}

.dab-box {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.8vw, 1rem);
  font-weight: 700;
  color: var(--bg);
}

.dab-box[data-owner="0"] {
  background: var(--dab-p0);
}

.dab-box[data-owner="1"] {
  background: var(--dab-p1);
}