/* ── Dots and Boxes ─────────────────────────────────────────────────────── */
.dots-board-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 8px; width: 100%;
}
.dots-board {
  display: grid;
  /* Non-uniform: dot cols are 14px, box/line cols stretch equally */
  grid-template-columns: 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
  grid-template-rows:    14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
  gap: 0;
  width: min(480px, 92vw);
  height: min(480px, 92vw);
  user-select: none;
}
/* Dots */
.db-dot {
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: 50%;
  margin: auto;
}
/* Lines — unclaimed show as faint line-color bar. The element is visually
   6px thick but carries a larger invisible hit area via ::before so
   fingers can actually tap them on mobile (Apple's 44px minimum).
   position: relative so the ::before anchors to the bar. */
.db-h {
  position: relative;
  height: 6px;
  width: calc(100% - 4px);
  background: var(--line);
  border-radius: 3px;
  align-self: center;
  justify-self: center;
  transition: background 120ms, opacity 120ms;
  cursor: default;
}
.db-v {
  position: relative;
  width: 6px;
  height: calc(100% - 4px);
  background: var(--line);
  border-radius: 3px;
  justify-self: center;
  align-self: center;
  transition: background 120ms, opacity 120ms;
  cursor: default;
}
/* Larger invisible hit area — only on clickable lines so inactive ones
   don't trap taps meant for the lines next to them. */
.db-h.db-clickable::before,
.db-v.db-clickable::before {
  content: '';
  position: absolute;
  background: transparent;
}
.db-h.db-clickable::before {
  top: -14px; bottom: -14px;
  left: -4px; right: -4px;
}
.db-v.db-clickable::before {
  left: -14px; right: -14px;
  top: -4px; bottom: -4px;
}
.db-clickable { cursor: pointer; }
.db-h.db-clickable:hover,
.db-h.db-pending { background: var(--accent); opacity: 0.6; }
.db-v.db-clickable:hover,
.db-v.db-pending { background: var(--accent); opacity: 0.6; }
.db-h.db-mine,
.db-v.db-mine { background: var(--accent); opacity: 1; }
.db-h.db-theirs,
.db-v.db-theirs { background: var(--muted); opacity: 0.8; }
/* Boxes */
.db-box {
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  color: transparent;
  transition: background 200ms, color 200ms;
  margin: 3px;
}
.db-box-mine {
  background: rgba(46,93,58,0.15);
  color: var(--accent);
}
.db-box-theirs {
  background: rgba(107,114,128,0.12);
  color: var(--muted);
}
/* Score cards */
.dots-score-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.dots-score-card {
  flex: 1; text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 4px;
  transition: border-color 150ms, background 150ms;
}
.dots-score-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dots-score-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.dots-score-value { font-size: 26px; font-weight: 700; }
.dots-score-sep { color: var(--muted); font-size: 18px; flex-shrink: 0; }
/* Result banner */
.dots-result-banner {
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
/* Fullscreen: let the board fill */
.game-page-layout.max-board:fullscreen .dots-board-wrap,
.game-page-layout.max-board.is-fullscreen .dots-board-wrap { padding: 8px; }
.game-page-layout.max-board:fullscreen .dots-board,
.game-page-layout.max-board.is-fullscreen .dots-board {
  width: min(86vw, 86vh);
  height: min(86vw, 86vh);
}
@media (max-width: 540px) {
  .dots-board { width: 96vw; height: 96vw; }
}