/* ====== WARM SUNSHINE BACKGROUND ====== */
body {
  background-image: url('../images/green.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ====== HAPPINESS-SPECIFIC STYLES ====== */
.happiness-card {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}

.happiness-card .card-body {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.happiness-label {
  font-family: var(--font-heading);
  font-weight: 600;
}

#happy-note {
  border-radius: var(--radius-nav);
  border: 1px solid rgba(239, 108, 0, 0.2);
  min-height: 7rem;
  resize: vertical;
}

#happy-note:focus {
  border-color: #3a973f;
  box-shadow: 0 0 0 0.2rem rgba(28, 61, 15, 0.18);
}

#happy-submit,
#board-prev,
#board-next {
  background: linear-gradient(135deg, #ffa726, #3a973f);
  border: none;
  color: white;
}

#happy-submit:hover,
#board-prev:hover,
#board-next:hover {
  background: linear-gradient(135deg, #ff9800, #3a973f);
  box-shadow: 0 6px 14px rgba(28, 61, 15, 0.3);
}


.status-text {
  min-height: 1.4rem;
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.board-pagination {
  flex-wrap: wrap;
}

.board-pagination .btn {
  flex: 1 1 10rem;
}


#submit-status.status-success,
#submit-status.status-error,
#submit-status.status-neutral {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
}

#submit-status.status-success {
  color: #1b5e20;
  background-color: rgba(129, 199, 132, 0.28);
}

#submit-status.status-success::before {
  content: '✓';
  font-weight: 700;
}

#submit-status.status-error {
  color: #b71c1c;
  background-color: rgba(239, 83, 80, 0.22);
}

#submit-status.status-error::before {
  content: '!';
  font-weight: 700;
}

#submit-status.status-neutral {
  color: #e65100;
  background-color: rgba(255, 204, 128, 0.32);
}

#happy-create-another {
  border-radius: var(--radius-nav);
  background: linear-gradient(135deg, #ffa726, #3a973f);
  border: none;
  color: white;
}

#happy-create-another:hover {
  background: linear-gradient(135deg, #ffa726, #3a973f);
  box-shadow: 0 6px 14px rgba(239, 108, 0, 0.3);
}

.positivity-board {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.positivity-note {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-nav);
  background-color: rgba(100, 163, 108, 0.2);
  opacity: 0;
  transform: translateY(8px);
  animation: positivityNoteIn 360ms ease forwards;
  animation-delay: var(--note-delay, 0ms);
}

.positivity-empty {
  margin: 0;
  color: rgba(230, 81, 0, 0.6);
}

@keyframes positivityNoteIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .positivity-note {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 575.98px) {
  .card.happy-card .card-body {
    padding: 1.25rem;
  }

  .board-pagination {
    flex-direction: column;
    gap: 0.75rem;
  }

  .board-pagination .btn {
    width: 100%;
    flex: 0 0 auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .status-text {
    min-height: 0;
  }
}


/* ====== SPARKLES BACKGROUND ====== */
.sparkles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  opacity: 0;
  animation: floatSparkle ease-in-out infinite;
}

.sparkle-1 { left: 5%;  top: 80%; animation-duration: 7s;  animation-delay: 0s;   font-size: 1.4rem; }
.sparkle-2 { left: 20%; top: 90%; animation-duration: 9s;  animation-delay: 1.5s; font-size: 1rem; }
.sparkle-3 { left: 35%; top: 85%; animation-duration: 8s;  animation-delay: 3s;   font-size: 1.6rem; }
.sparkle-4 { left: 50%; top: 95%; animation-duration: 10s; animation-delay: 0.5s; font-size: 1.2rem; }
.sparkle-5 { left: 65%; top: 88%; animation-duration: 7s;  animation-delay: 2s;   font-size: 1.5rem; }
.sparkle-6 { left: 75%; top: 92%; animation-duration: 9s;  animation-delay: 4s;   font-size: 1rem; }
.sparkle-7 { left: 85%; top: 80%; animation-duration: 8s;  animation-delay: 1s;   font-size: 1.3rem; }
.sparkle-8 { left: 92%; top: 87%; animation-duration: 11s; animation-delay: 2.5s; font-size: 1.1rem; }

@keyframes floatSparkle {
  0%   { opacity: 0;   transform: translateY(0) rotate(0deg) scale(0.8); }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(-110vh) rotate(180deg) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: 0; }
}