.kk-board {
  position: relative;
  width: 320px;
  height: 320px;
}

@media (max-width: 420px) {
  .kk-board { width: 84vw; height: 84vw; }
}

.kk-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--wood-800);
  z-index: 3;
}

.kk-box {
  position: absolute;
  border-radius: 4px;
  z-index: 1;
}
.kk-box.owner-0 { background: rgba(148, 44, 62, 0.35); }
.kk-box.owner-1 { background: rgba(212, 176, 108, 0.35); }

.kk-edge {
  position: absolute;
  border: none;
  padding: 0;
  background: rgba(74, 56, 42, 0.18);
  border-radius: 3px;
  cursor: pointer;
  z-index: 2;
}
.kk-edge:hover:not(:disabled) {
  background: rgba(184, 147, 79, 0.6);
}
.kk-edge:disabled {
  cursor: default;
}
.kk-edge.drawn {
  background: var(--wood-800);
}