/* ===== TYPING STORY CHALLENGE ===== */
.typing-story {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(135deg, #fff7ed, #fff1e6);
  border-radius: 20px;
  margin-top: 50px;
  box-shadow: inset 5px 5px 15px #cfd9e6, inset -5px -5px 15px #ffffff;
}

.typing-story .section-title {
  color: #f97316;
  margin-bottom: 10px;
}

.typing-story .section-subtitle {
  color: #4b5563;
  margin-bottom: 30px;
}

.story-box {
  background: #ffedd5;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 10px 10px 20px #c9d3e6, -10px -10px 20px #ffffff;
  max-width: 800px;
  margin: auto;
  text-align: left;
}

.story-text {
  background: #fed7aa;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  line-height: 1.5rem;
  box-shadow: inset 3px 3px 8px #cfd9e6, inset -3px -3px 8px #ffffff;
  font-size: 1rem;
}

textarea {
  width: 100%;
  padding: 15px;
  font-size: 1rem;
  border-radius: 15px;
  border: none;
  outline: none;
  box-shadow: inset 3px 3px 8px #cfd9e6, inset -3px -3px 8px #ffffff;
  margin-bottom: 15px;
  resize: none;
}

.btn {
  background: linear-gradient(135deg, #f97316, #fb923c);
  border: none;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 30px;
  border-radius: 50px;
  cursor: pointer;
  margin: 5px;
  transition: 0.3s;
}

.btn:hover {
  background: linear-gradient(135deg, #c2410c, #ea580c);
  transform: scale(1.05);
}

.results p {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 10px 0;
}