body {
  background: #222;
  color: white;
  font-family: Arial;
}

#app {
  display: flex;
  gap: 20px;
  padding: 20px;
}

#board {
  width: 480px;
  height: 480px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 4px solid #444;
}

.square {
  width: 60px;
  height: 60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  cursor:pointer;
}

.light { background:#f0d9b5; }
.dark  { background:#b58863; }

.square.highlight {
  background: #66cc66 !important;
}

#panel {
  width: 300px;
}

textarea {
  width:100%;
  height:80px;
  margin-top:10px;
}

button {
  margin-top:5px;
  width:100%;
  padding:5px;
  cursor:pointer;
}

#moves {
  height:200px;
  overflow-y:auto;
  background:#111;
  padding:10px;
}