:root {
  color-scheme: dark;
}
body {
  background: #000;
  color: #fff;
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-quicksand { font-family: 'Quicksand', sans-serif; }
a { text-decoration: none; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.age-banner {
  background: linear-gradient(to right, #db2777, #2563eb);
  color: #fff; text-align: center; padding: 0.5rem 1rem;
}
.age-banner p { font-size: 0.875rem; font-weight: 700; margin: 0; }
.main-nav { background: #000; border-bottom: 4px solid #db2777; }
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between; height: 4rem;
}
.logo { display: flex; align-items: center; gap: 0.5rem; }
.logo-text {
  font-size: 1.75rem; font-weight: 700;
  background: linear-gradient(to right, #db2777, #2563eb);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-desktop { display: none; align-items: center; gap: 0.25rem; }
.nav-link {
  padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 700; font-size: 0.875rem;
  color: #fff; transition: all .3s;
}
.nav-link:hover { background: rgba(219,39,119,.2); transform: scale(1.05); }
.nav-link.nav-active { background: linear-gradient(to right, #db2777, #2563eb); }
.menu-btn {
  display: inline-flex; padding: 0.5rem; border-radius: 9999px;
  background: #db2777; color: #fff; border: none; cursor: pointer;
}
.menu-btn:hover { background: #be185d; }
.nav-mobile { background: #000; border-top: 2px solid #db2777; padding: 1rem; }
.nav-link-mobile {
  display: block; padding: 0.75rem 1rem; border-radius: 1rem; font-weight: 700;
  color: #fff; margin-bottom: 0.5rem;
}
.nav-link-mobile.nav-active { background: linear-gradient(to right, #db2777, #2563eb); }
.nav-link-mobile:hover { background: rgba(219,39,119,.2); }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .menu-btn { display: none; }
  .nav-mobile { display: none !important; }
}

main { padding-top: 7rem; }
@media (min-width: 768px) { main { padding-top: 6rem; } }

/* ---------- Footer ---------- */
.site-footer { background: #0a0a0a; border-top: 4px solid #db2777; padding: 3rem 1rem; text-align: center; }
.footer-inner { max-width: 800px; margin: 0 auto; }
.footer-brand { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.footer-tag { color: #9ca3af; margin-bottom: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.footer-links a { color: #d1d5db; font-weight: 600; }
.footer-links a:hover { color: #db2777; }
.footer-copy { color: #6b7280; font-size: 0.875rem; }

/* ---------- Chat bubble ---------- */
.chat-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  background: linear-gradient(to right, #db2777, #2563eb); color: #fff;
  border-radius: 9999px; padding: 1rem; border: none; cursor: pointer;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.4); transition: transform .3s;
}
.chat-btn:hover { transform: scale(1.1); }
.chat-panel {
  position: fixed; bottom: 6rem; right: 1.5rem; z-index: 50;
  background: #fff; color: #000; border-radius: 1.5rem; padding: 1.5rem;
  width: 20rem; max-width: calc(100vw - 3rem); border: 4px solid #db2777;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.4);
}
.chat-title { font-size: 1.5rem; font-weight: 700; color: #db2777; }
.chat-panel p { margin-top: 0.75rem; color: #374151; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 700; border-radius: 9999px; padding: 1rem 2rem; transition: transform .3s;
  border: none; cursor: pointer; font-size: 1.125rem;
}
.btn:hover { transform: scale(1.05); }
.btn-gradient { background: linear-gradient(to right, #db2777, #2563eb); color: #fff; margin-top: 1rem; }
.btn-white { background: #fff; color: #db2777; }
.btn-outline { background: #000; color: #fff; border: 4px solid #fff; }
.btn-disabled { background: #374151; color: #9ca3af; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(to bottom right, rgba(219,39,119,.1), rgba(37,99,235,.1));
  border: 4px solid #db2777; border-radius: 1.5rem; transition: all .3s;
}
.card:hover { border-color: #2563eb; }

/* ---------- Fade-in animation (replaces framer-motion) ---------- */
.fade-in { opacity: 0; animation: fadeIn .6s ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(20px); } }

/* ---------- Meme card ---------- */
.meme-card { overflow: hidden; }
.meme-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* ---------- Challenge modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-box {
  background: linear-gradient(to bottom right, #db2777, #2563eb);
  border-radius: 1.5rem; padding: 2rem; max-width: 42rem; width: 100%; border: 4px solid #fff;
}
.challenge-card { cursor: pointer; position: relative; }
.challenge-card.locked { opacity: .5; cursor: not-allowed; }
.challenge-card .lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.7); border-radius: 1.5rem;
}