* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #222;
}

select, button {
  appearance: none;
  background: #ffffff;
  color: #000;
  border: 1px solid #444;
  padding: 8px 12px;
  font-weight: 600;
  border-radius: 10px;
}

.board {
  min-height: 60vh;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid #111;
}

.shape {
  width: 80px;
  height: 80px;
  background: #888;
  display: inline-block;
}

.shape.circle { border-radius: 0;
  border-radius: 50%;
}

.shape.triangle {
  background: #888;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape:hover {
  outline: 1px solid #fff;
  outline-offset: -1px;
}