/* Story Chain specific styles */
.storychain-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 1.2rem;
  cursor: pointer;
}
.storychain-close-btn:hover {
  color: var(--red);
}

.storychain-title {
  color: var(--cyan);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.storychain-prompt {
  font-size: 1.3rem;
  color: var(--text);
}

.storychain-status {
  font-size: 0.9rem;
  color: var(--amber);
  min-height: 1.2rem;
}

.storychain-input-area, .storychain-reveal-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.storychain-input-area.hidden, .storychain-reveal-area.hidden {
  display: none;
}

#storychain-contribution-input {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.2rem;
  padding: 0.75rem;
  text-align: left;
  outline: none;
  resize: vertical;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
}

#storychain-contribution-input:focus {
  border-color: var(--cyan);
}

.storychain-counter {
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}

.contribution-box {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contribution-label {
  font-size: 0.8rem;
  color: var(--text-faint);
  text-transform: uppercase;
}

.contribution-text {
  font-size: 1.4rem;
  color: var(--green);
}

.full-story {
  margin-top: 1rem;
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 1rem;
}

.full-story h3 {
  margin-top: 0;
  color: var(--cyan);
  font-size: 1rem;
}

.full-story p {
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .storychain-card { padding: 1rem !important; gap: 0.8rem !important; width: 95% !important; }
  .storychain-title { font-size: 1.1rem !important; }
  .storychain-prompt { font-size: 1.1rem !important; }
}