/* Godnattsaga — varm, mjuk kvällskänsla */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(180deg, #2b2a4e 0%, #4a3f6b 55%, #7a5c8d 100%);
  min-height: 100vh;
  color: #3d2f4f;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
  position: relative;
  overflow-x: hidden;
}

/* stjärnhimmel */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 15%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 10%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 30%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 25%, #fff8 50%, transparent 51%),
    radial-gradient(2px 2px at 10% 45%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 40%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 60%, #fff4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 65%, #fff5 50%, transparent 51%);
}

.container { width: 100%; max-width: 720px; position: relative; }

.header { text-align: center; color: #fdf6e3; margin-bottom: 24px; }

.moon {
  font-size: 56px;
  animation: floaty 5s ease-in-out infinite;
  display: inline-block;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}

h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 1px;
  margin-top: 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.tagline {
  margin-top: 8px;
  font-size: 1.05rem;
  color: #f3e9ce;
  font-style: italic;
}

.card {
  background: #fdf6e3;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(20, 15, 45, .45);
  margin-bottom: 20px;
}

.idea-label {
  display: block;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #4a3564;
}

textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 14px;
  border: 2px solid #d8c9a8;
  border-radius: 16px;
  background: #fffdf5;
  resize: vertical;
  color: #3d2f4f;
}

textarea:focus { outline: none; border-color: #a07ac2; }

.mood-label {
  margin-top: 18px;
  font-size: 1.05rem;
  font-weight: bold;
  color: #4a3564;
}

.mood-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.mood-btn {
  font: inherit;
  font-size: 1rem;
  padding: 10px 16px;
  border: 2px solid #d8c9a8;
  border-radius: 999px;
  background: #fffdf5;
  color: #4a3564;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.mood-btn:hover { transform: translateY(-1px); border-color: #a07ac2; }

.mood-btn.selected {
  background: linear-gradient(135deg, #8a63b8, #b7599a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(120, 70, 160, .4);
}

.big-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  font: inherit;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #8a63b8, #b7599a);
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(120, 70, 160, .45);
}

.big-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(120, 70, 160, .55); }
.big-btn:disabled { opacity: .6; cursor: wait; }

.big-btn.secondary {
  background: linear-gradient(135deg, #5f8fbf, #6fb3a8);
  box-shadow: 0 6px 18px rgba(70, 110, 160, .45);
}

.error {
  margin-top: 14px;
  padding: 12px 16px;
  background: #ffe3e0;
  border: 2px solid #e8a09a;
  border-radius: 14px;
  color: #8c3a32;
}

.loading { text-align: center; padding: 48px 28px; }

.sleepy-moon {
  font-size: 64px;
  animation: floaty 3s ease-in-out infinite;
  display: inline-block;
  margin-bottom: 16px;
}

#loading-text { font-size: 1.3rem; font-weight: bold; color: #4a3564; }
.loading-hint { margin-top: 10px; color: #7a6a8c; font-style: italic; }

.story h2 {
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: #4a3564;
  margin-bottom: 20px;
}

.scene {
  font-size: 1.15rem;
  line-height: 1.75;
  margin-bottom: 22px;
}

.scene::first-letter {
  font-size: 1.6em;
  font-weight: bold;
  color: #8a63b8;
}

.story-actions { margin-top: 8px; }

.footer {
  color: #d9c9ef;
  margin-top: auto;
  padding-top: 24px;
  font-style: italic;
}