.theme-option {
  cursor: pointer;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s;
}
.theme-option:hover {
  border-color: #6c757d;
}
.theme-option.active {
  border-color: #d4af37;
}
.board-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
}
.board-wood {
  background: linear-gradient(45deg, #b58863 25%, #f0d9b5 25%, #f0d9b5 50%, #b58863 50%, #b58863 75%, #f0d9b5 75%);
  background-size: 33.33% 33.33%;
}
.board-green {
  background: linear-gradient(45deg, #769656 25%, #eeeed2 25%, #eeeed2 50%, #769656 50%, #769656 75%, #eeeed2 75%);
  background-size: 33.33% 33.33%;
}
.board-tournament-green {
  background: linear-gradient(45deg, #3F6B45 25%, #E7E9D7 25%, #E7E9D7 50%, #3F6B45 50%, #3F6B45 75%, #E7E9D7 75%);
  background-size: 33.33% 33.33%;
}
.board-tournament-blue {
  background: linear-gradient(45deg, #4B6B8A 25%, #DEE7F0 25%, #DEE7F0 50%, #4B6B8A 50%, #4B6B8A 75%, #DEE7F0 75%);
  background-size: 33.33% 33.33%;
}
.board-icy-sea {
  background: linear-gradient(45deg, #6FAFCA 25%, #EAF6FA 25%, #EAF6FA 50%, #6FAFCA 50%, #6FAFCA 75%, #EAF6FA 75%);
  background-size: 33.33% 33.33%;
}
.board-slate {
  background: linear-gradient(45deg, #6B7280 25%, #E1E5EA 25%, #E1E5EA 50%, #6B7280 50%, #6B7280 75%, #E1E5EA 75%);
  background-size: 33.33% 33.33%;
}
.board-graphite {
  background: linear-gradient(45deg, #30363D 25%, #C9D1D9 25%, #C9D1D9 50%, #30363D 50%, #30363D 75%, #C9D1D9 75%);
  background-size: 33.33% 33.33%;
}
.board-walnut {
  background: linear-gradient(45deg, #7A4F2A 25%, #F2DEC2 25%, #F2DEC2 50%, #7A4F2A 50%, #7A4F2A 75%, #F2DEC2 75%);
  background-size: 33.33% 33.33%;
}
.board-espresso {
  background: linear-gradient(45deg, #4A2F23 25%, #E7D7C6 25%, #E7D7C6 50%, #4A2F23 50%, #4A2F23 75%, #E7D7C6 75%);
  background-size: 33.33% 33.33%;
}
.board-marble {
  background: linear-gradient(45deg, #7A7A7A 25%, #E5E1D8 25%, #E5E1D8 50%, #7A7A7A 50%, #7A7A7A 75%, #E5E1D8 75%);
  background-size: 33.33% 33.33%;
}
.board-purple-haze {
  background: linear-gradient(45deg, #6E52A3 25%, #EEE7F7 25%, #EEE7F7 50%, #6E52A3 50%, #6E52A3 75%, #EEE7F7 75%);
  background-size: 33.33% 33.33%;
}
.board-bubblegum {
  background: linear-gradient(45deg, #D16B8D 25%, #F7DDE8 25%, #F7DDE8 50%, #D16B8D 50%, #D16B8D 75%, #F7DDE8 75%);
  background-size: 33.33% 33.33%;
}