/* have.you — Application CSS */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Fun background ───────────────────────────────────────────────────────── */

.fun-bg {
  background-color: #FAFAF8;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,107,107,0.10) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(78,205,196,0.08)  1px, transparent 0);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
}

/* ── Rainbow top stripe ───────────────────────────────────────────────────── */

.rainbow-stripe {
  height: 5px;
  background: linear-gradient(90deg,
    #FF6B6B 0%, #FF8B94 18%, #FFE66D 35%,
    #A8E6CF 50%, #4ECDC4 65%, #6C63FF 82%, #FF6B6B 100%);
  background-size: 200% 100%;
  animation: rainbowShift 6s linear infinite;
}

@keyframes rainbowShift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.nav-header {
  background: white;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #6C63FF) 1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #4a5568;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.nav-pill:hover {
  background: linear-gradient(135deg, #fff5f5, #f0fffe);
  color: #FF6B6B;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,107,107,0.15);
}

.nav-pill--active {
  background: linear-gradient(135deg, #fff5f5, #fef9f0);
  color: #FF6B6B;
  box-shadow: 0 2px 8px rgba(255,107,107,0.18);
}

.mobile-nav-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  font-weight: 800;
  color: #374151;
  transition: all 0.15s;
}

.mobile-nav-item:hover {
  background: linear-gradient(135deg, #fff5f5, #f0fffe);
  color: #FF6B6B;
  padding-left: 1.25rem;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */

.logo-bubble {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(255,107,107,0.3);
  transition: box-shadow 0.2s, transform 0.2s;
}

.logo-link:hover .logo-bubble {
  box-shadow: 0 5px 18px rgba(255,107,107,0.45);
  transform: scale(1.05) rotate(-3deg);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.play-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.65rem 1.75rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: white;
  background: linear-gradient(135deg, #4ECDC4, #44b8b0);
  box-shadow: 0 3px 12px rgba(78,205,196,0.4);
  transition: all 0.2s;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.play-now-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(78,205,196,0.55);
}

.signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.875rem;
  color: white;
  background: linear-gradient(135deg, #FF6B6B, #FF8B94);
  box-shadow: 0 3px 12px rgba(255,107,107,0.35);
  transition: all 0.2s;
}

.signup-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(255,107,107,0.5);
}

.fun-search {
  width: 10rem;
  font-size: 0.875rem;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  padding: 0.375rem 1rem;
  transition: all 0.2s;
  outline: none;
}

.fun-search:focus {
  border-color: #4ECDC4;
  box-shadow: 0 0 0 3px rgba(78,205,196,0.18);
  width: 13rem;
}

/* ── Fun card styles ──────────────────────────────────────────────────────── */

.fun-card {
  background: white;
  border-radius: 1.25rem;
  border: 2px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.22s;
}

.fun-card:hover {
  border-color: #FF6B6B33;
  box-shadow: 0 8px 30px rgba(255,107,107,0.14);
  transform: translateY(-3px);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.fun-footer {
  background: linear-gradient(160deg, #2D3436 0%, #1a1f20 100%);
  position: relative;
  overflow: hidden;
}

.fun-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #6C63FF);
}

.footer-heading {
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.footer-link {
  color: #9ca3af;
  transition: all 0.15s;
  display: inline-block;
}

.footer-link:hover {
  color: white;
  transform: translateX(3px);
}

/* ── Mobile bottom nav ────────────────────────────────────────────────────── */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: white;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #6C63FF) 1;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: #9ca3af;
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
  transition: all 0.15s;
}

.bottom-nav-item:hover,
.bottom-nav-item--active {
  color: #FF6B6B;
  background: rgba(255,107,107,0.08);
}

.bottom-nav-item--cta {
  color: #FF6B6B;
}

/* ── Touch targets ────────────────────────────────────────────────────────── */

.touch-target { min-height: 44px; min-width: 44px; }

/* ── Game full-screen ─────────────────────────────────────────────────────── */

.game-fullscreen { min-height: 100dvh; }

/* ── Swipe card ───────────────────────────────────────────────────────────── */

.swipe-card {
  touch-action: pan-y;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swipe-left  { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.swipe-right { transform: translateX(120%)  rotate(8deg);  opacity: 0; }

/* ── Question text ────────────────────────────────────────────────────────── */

.question-text {
  font-size: clamp(1.25rem, 4vw, 2rem);
  line-height: 1.4;
}

/* ── Game buttons ─────────────────────────────────────────────────────────── */

.game-btn { touch-action: manipulation; }

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(78,205,196,0.4); }
  50%       { box-shadow: 0 3px 22px rgba(78,205,196,0.7); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes bouncein {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes questionFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.game-question-enter { animation: questionFadeIn 0.4s ease-out; }
.progress-bar        { transition: width 0.5s ease-in-out; }
.wheel-spinning      { animation: spin 1s ease-out; }

/* ── Base layer overrides ─────────────────────────────────────────────────── */

@layer base {
  html { scroll-behavior: smooth; }

  body { font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif; }

  :focus-visible {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
  }
}

/* ── Components ───────────────────────────────────────────────────────────── */

@layer components {
  .btn-primary {
    @apply font-extrabold px-6 py-3 rounded-2xl text-white transition-all focus:outline-none focus:ring-2 focus:ring-offset-2;
    background: linear-gradient(135deg, #FF6B6B, #FF8B94);
    box-shadow: 0 3px 12px rgba(255,107,107,0.35);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,107,0.45);
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-700 font-extrabold px-6 py-3 rounded-2xl hover:bg-gray-200 transition-all focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2;
  }

  .btn-teal {
    @apply font-extrabold px-6 py-3 rounded-2xl text-white transition-all focus:outline-none;
    background: linear-gradient(135deg, #4ECDC4, #44b8b0);
    box-shadow: 0 3px 12px rgba(78,205,196,0.35);
  }

  .btn-teal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78,205,196,0.45);
  }

  .card {
    @apply bg-white rounded-2xl border border-gray-100 shadow-sm p-6;
  }

  .form-input {
    @apply w-full border-2 border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none transition-all;
    &:focus {
      border-color: #4ECDC4;
      box-shadow: 0 0 0 3px rgba(78,205,196,0.15);
    }
  }

  .badge           { @apply text-xs px-2.5 py-1 rounded-full font-bold; }
  .badge-success   { @apply bg-green-100  text-green-700; }
  .badge-warning   { @apply bg-yellow-100 text-yellow-700; }
  .badge-danger    { @apply bg-red-100    text-red-700; }
  .badge-info      { @apply bg-blue-100   text-blue-700; }
  .badge-coral     { background: #fff0f0; color: #FF6B6B; }
  .badge-teal      { background: #f0fffe; color: #4ECDC4; }
  .badge-purple    { background: #f3f2ff; color: #6C63FF; }
}

/* ── Utilities ────────────────────────────────────────────────────────────── */

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

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

  .gradient-text-coral {
    background: linear-gradient(135deg, #FF6B6B, #FF8B94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-text-teal {
    background: linear-gradient(135deg, #4ECDC4, #44e0d7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-bg-party {
    background: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 35%, #4ECDC4 70%, #6C63FF 100%);
  }
}