body {
  font-family: Comic Sans MS, Arial, sans-serif;
  text-align: center;
  background: #f7faff;
  margin-top: 20px;
}

h1 {
  color: #ff6f00;
  font-size: 40px;
}

#controls {
  margin-bottom: 20px;
}

#controls select, #controls button {
  padding: 10px;
  font-size: 18px;
  margin: 5px;
  border-radius: 10px;
  border: 2px solid #ccc;
}

#letters button {
  margin: 5px;
  padding: 12px 18px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
  background: #ffecb3;
  border: 2px solid #ffb300;
}

#letters button:disabled {
  background: #ddd;
  color: #888;
}

#word {
  font-size: 40px;
  letter-spacing: 12px;
  margin: 20px 0;
}

.part {
  stroke: black;
  stroke-width: 4;
  display: none;
}

svg {
  margin-bottom: 20px;
}

.shake {
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}