.ld-board {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  width: min(520px, 100%);
  aspect-ratio: 1;
  background: #16171d;
  border-radius: 10px;
  gap: 1px;
  padding: 4px;
}

.ld-cell {
  position: relative;
  border-radius: 2px;
  background: var(--color-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0;
}

.ld-cell.ld-safe { background: var(--color-surface-hover); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }

.ld-cell.ld-home-red { background: rgba(239,83,80,0.28); }
.ld-cell.ld-home-green { background: rgba(102,187,106,0.28); }
.ld-cell.ld-home-yellow { background: rgba(255,213,79,0.28); }
.ld-cell.ld-home-blue { background: rgba(79,195,247,0.28); }

.ld-cell.ld-selectable { box-shadow: inset 0 0 0 2px var(--color-primary); z-index: 2; }

.ld-token {
  width: 62%;
  height: 62%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.4);
}

.ld-token.ld-red { background: radial-gradient(circle at 35% 30%, #ff8a80, #d32f2f); }
.ld-token.ld-green { background: radial-gradient(circle at 35% 30%, #a5d6a7, #2e7d32); }
.ld-token.ld-yellow { background: radial-gradient(circle at 35% 30%, #fff59d, #f9a825); }
.ld-token.ld-blue { background: radial-gradient(circle at 35% 30%, #81d4fa, #0277bd); }

.ld-yard-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  font-size: 0.82rem;
  cursor: default;
}
.ld-yard-chip.ld-yard-active { cursor: pointer; box-shadow: 0 0 0 2px var(--color-primary); }
.ld-yard-chip .ld-token { width: 16px; height: 16px; cursor: default; }