:root {
  --berry-1: #2b0a3d;
  --berry-2: #5b1e63;
  --berry-3: #b0296b;
  --berry-4: #ff4d8d;
  --berry-glow: #ff8fc7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  color: #fff;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,143,199,0.35), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(176,41,107,0.4), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(91,30,99,0.55), transparent 55%),
    linear-gradient(160deg, #1a0526 0%, #2b0a3d 45%, #43124f 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.title {
  background: linear-gradient(90deg, #ffd7ec, #ff8fc7, #ffb84d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255,77,141,0.4));
}

.text-berry-soft { color: #f7c6e0; }
.text-berry-dark { color: #2b0a3d; }

/* dream button */
.dream-btn {
  background: linear-gradient(100deg, #ff4d8d, #ff7ab0, #ffab5e);
  background-size: 200% 100%;
  animation: shift 4s ease infinite;
}
.dream-btn:hover { filter: brightness(1.07); }
@keyframes shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* chips */
.chip { border: 1px solid transparent; }
.chip-idle { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.2); }
.chip-idle:hover { background: rgba(255,255,255,0.2); }
.chip-active {
  background: #fff; color: var(--berry-1);
  box-shadow: 0 4px 16px rgba(255,143,199,0.5);
}

/* result action buttons */
.result-act {
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  transition: all 0.15s;
}
.result-act:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
.result-act-star {
  background: linear-gradient(100deg,#ff4d8d,#ffab5e);
  border-color: transparent;
}

/* spinner */
.spinner {
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* shimmer loading */
.shimmer {
  background: linear-gradient(110deg, rgba(255,255,255,0.06) 25%, rgba(255,143,199,0.22) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border: 1px solid rgba(255,255,255,0.12);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* fade in */
.fade-in { animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* floating berry */
.float-berry { display: inline-block; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-8px) rotate(4deg)} }

/* sparkles */
.sparkle { animation: pop 1.3s ease-out forwards; opacity: 0; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%,-140%) scale(0.6); }
}

/* toast */
.toast-in { animation: toastIn 0.25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

::selection { background: var(--berry-4); color: #fff; }