.wd-board {
  display: grid;
  gap: 5px;
  justify-content: center;
  margin: 0 auto 1rem;
}
.wd-row {
  display: grid;
  grid-template-columns: repeat(5, 52px);
  gap: 5px;
}
.wd-tile {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
}
.wd-filled { border-color: rgba(255, 255, 255, 0.5); }
.wd-shake { animation: wd-shake 0.4s ease; }
@keyframes wd-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.wd-correct { background: #22a06b; border-color: #22a06b; }
.wd-present { background: #c9a227; border-color: #c9a227; }
.wd-absent { background: #3a4358; border-color: #3a4358; }

.wd-keyboard {
  display: grid;
  gap: 6px;
  max-width: 500px;
  margin: 0 auto;
}
.wd-kbrow {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.wd-key {
  min-width: 30px;
  padding: 0.8rem 0.5rem;
  border-radius: 6px;
  border: none;
  background: #556;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
}
.wd-key--wide { min-width: 56px; font-size: 0.8rem; }
.wd-key:hover { filter: brightness(1.15); }

@media (max-width: 480px) {
  .wd-row { grid-template-columns: repeat(5, 44px); }
  .wd-tile { width: 44px; height: 44px; font-size: 1.2rem; }
}