.board {
  width: min(360px, 100%);
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.guess {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.guess.shake { animation: wobble .36s linear; }

@keyframes wobble {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.letter, .key {
  display: grid;
  place-items: center;
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(255, 246, 232, .08);
  border: 2px solid rgba(240, 193, 74, .28);
  color: #fff6e8;
}

.letter {
  aspect-ratio: 1;
  font-size: clamp(22px, 6vw, 30px);
}

.guess.now .letter { border-color: rgba(255, 224, 138, .7); }

.letter.right, .key.right { background: linear-gradient(180deg, #b6f5a8, #2f9e44); color: #06210c; border-color: transparent; }
.letter.there, .key.there { background: linear-gradient(180deg, #ffe7a3, #e0a020); color: #3d2408; border-color: transparent; }
.letter.miss, .key.miss { background: #3a2a24; color: #cbbbaa; border-color: transparent; }

.keys {
  width: min(420px, 100%);
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.keyrow { display: flex; justify-content: center; gap: 4px; }

.key {
  appearance: none;
  min-width: 30px;
  height: 48px;
  padding: 0 6px;
  flex: 1;
  font-size: 16px;
  cursor: pointer;
}

.key.wide { flex: 1.5; font-size: 13px; font-family: Nunito, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .guess.shake { animation: none; }
}