body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  background: #02540d;
  color: white;
}

h1 {
  color: #E8C84A;
  font-size: 2.4rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px black;
}

p {
  font-size: 1.2rem;
}

.description {
  color: yellow;
}

#score {
  font-size: 1.3rem;
  color: #E8C84A;
  font-weight: bold;
  margin-bottom: 20px;
}

#scrambled {
  font-size: 2.2rem;
  background: #013b0a;
  border: 4px solid #E8C84A;
  padding: 20px 30px;
  border-radius: 12px;
  width: fit-content;
  margin: 20px auto;
  box-shadow: 0 0 10px black;
  letter-spacing: 0.3rem;
  animation: pop 0.4s ease;
}

@keyframes pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

input {
  padding: 12px;
  font-size: 1.1rem;
  width: 80%;
  max-width: 300px;
  border-radius: 8px;
  border: 2px solid #E8C84A;
  background: #013b0a;
  color: white;
  margin-bottom: 10px;
}

button {
  padding: 12px 25px;
  font-size: 1.1rem;
  margin: 5px;
  cursor: pointer;
  border: 3px solid #E8C84A;
  border-radius: 8px;
  background: #014d0e;
  color: #E8C84A;
  font-weight: bold;
  box-shadow: 0 0 8px black;
  transition: 0.2s;
}

button:hover {
  background: #026d12;
  transform: scale(1.05);
}

#message {
  margin-top: 15px;
  font-weight: bold;
  font-size: 1.3rem;
  color: #E8C84A;
  text-shadow: 1px 1px 3px black;
}