/* ================================
   🌟 SUPREME STYLESHEET – READ WITH JAZZ
   ================================ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  background: none !important;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.15) url('assets/background.png') no-repeat center center fixed;
  background-size: cover;
  background-blend-mode: lighten;
}


/* ✨ Animations */
@keyframes glowPulse {
  0% { box-shadow: 0 0 10px #ff00f7, 0 0 20px #00f0ff; }
  50% { box-shadow: 0 0 25px #00f0ff, 0 0 45px #ff00f7; }
  100% { box-shadow: 0 0 10px #ff00f7, 0 0 20px #00f0ff; }
}

@keyframes floatPulse {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* 🌐 Glowing Nav Buttons - Supreme Edition */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 3.5rem 2rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 3px solid #00f0ff;
  box-shadow: 0 0 25px #ff00f7, 0 0 50px #00f0ff;
}

.logo-wrapper {
  position: absolute;
  top: 5.5rem;
  left: 5.5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
}

/* ✨ Supreme Glowing Logo Animation */
.logo-glow {
  height: 120px;
  animation:
    logoGlowPulse 5s ease-in-out infinite,
    logoFloat 8s ease-in-out infinite,
    logoPop 0.8s ease-out;
  filter:
    drop-shadow(0 0 10px #ff00f7)
    drop-shadow(0 0 15px #00f0ff)
    drop-shadow(0 0 30px #ff00f7);
  transition: transform 0.3s ease-in-out;
  will-change: transform, filter;
}

/* 🔁 Hover Effect for Logo (Optional) */
.logo-glow:hover {
  transform: scale(1.1) rotate(2deg);
  filter:
    drop-shadow(0 0 20px #00f0ff)
    drop-shadow(0 0 30px #ff00f7);
}

/* 🌈 Glow Pulse Animation */
@keyframes logoGlowPulse {
  0% {
    filter: drop-shadow(0 0 10px #00f0ff) drop-shadow(0 0 20px #ff00f7);
  }
  50% {
    filter: drop-shadow(0 0 20px #ff00f7) drop-shadow(0 0 30px #00f0ff);
  }
  100% {
    filter: drop-shadow(0 0 10px #00f0ff) drop-shadow(0 0 20px #ff00f7);
  }
}

/* 🪩 Float Animation */
@keyframes logoFloat {
  0%, 100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-8px); }
}

/* 💥 Entrance Pop */
@keyframes logoPop {
  0% { transform: scale(0.5) translateY(-50%); opacity: 0; }
  100% { transform: scale(1) translateY(-50%); opacity: 1; }
}


.nav-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.nav-links a {
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  color: #00f0ff;
  border: 2px solid #00f0ff;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7;
  transition: all 0.3s ease-in-out;
  text-shadow: 0 0 8px #ff00f7;
}

.nav-links a:hover,
.nav-links .active {
  background: #00f0ff;
  color: #000;
  box-shadow: 0 0 20px #ff00f7, 0 0 40px #00f0ff;
  transform: scale(1.08);
}
/* 🔥 Supreme Glowing News Styles */
.glow-collage-section {
  max-width: 1100px; /* 👈 Controls total width */
  margin: 4rem auto;  /* 👈 Centers the section */
  padding: 40px 20px;
  text-align: center;
  background: radial-gradient(circle at center, #111 50%, #000 100%);
  box-shadow: 0 0 30px #00f0ff, 0 0 50px #ff00f7;
  border-radius: 20px;
  animation: fadeInGlow 1.5s ease both;
}


.glow-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7;
  margin-bottom: 30px;
}

.glow-collage-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.glow-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid #00f0ff;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 15px #00f0ff, 0 0 30px #ff00f7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #00f0ff, 0 0 50px #ff00f7;
}

.glow-card h3 {
  color: #ffffff;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: 0 0 5px #00f0ff;
}

.glow-card p {
  color: #ddd;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 15px;
}
.glow-img {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
}

/* 📱 Hamburger Base Style */
.hamburger {
  display: none;
  font-size: 2rem;
  color: #ff00f7;
  cursor: pointer;
}

/* 📱 Mobile Nav – Supreme Fix */
@media (max-width: 768px) {
  .navbar {
    position: fixed;
    top: 0px; /* ✅ CORRECTED: from "top: 10" to "10px" */
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.96);
    padding: 3rem 1.5rem 6.75rem; /* 🔽 pushed nav down more */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 5px solid #00f0ff;
    box-shadow: 0 0 25px #ff00f7, 0 0 45px #00f0ff;
  }

  .logo-wrapper {
    position: absolute;
    top: 80px;     /* 🔽 brings logo down */
    left: 16px;    /* ⬅️ move slightly inward */
    transform: none !important;
    z-index: 1001;
    padding: 0 !important;
    margin: 0 !important;
  }

  .logo-glow {
    height: 80px;
  }

  .hamburger {
    display: block;
    position: absolute;
    top: 50px;
    left: 75%;
    transform: translateX(-50%); /* ✅ CENTER HORIZONTALLY */
    font-size: 3rem;
    color: #ff00f7;
    cursor: pointer;
    z-index: 1001;
    text-shadow: 0 0 10px #ff00f7;
    filter: drop-shadow(0 0 10px #00f0ff);
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    border-top: 2px solid #00f0ff;
    box-shadow: 0 0 25px #00f0ff inset;
    margin: 0;
    padding: 0;
    gap: 0;
    z-index: 999;
  }

  .nav-links.nav-open {
    max-height: 480px;
    padding: 1rem 0;
  }

  .nav-links a {
    display: block;
    width: 60%;
    text-align: center;
    margin: 0.4rem 0;
    padding: 0.8rem;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #00f0ff;
    box-shadow: 0 0 15px #00f0ff inset;
    text-shadow: 0 0 6px #ff00f7;
    color: #00f0ff;
    transition: all 0.3s ease-in-out;
  }

  .nav-links a:hover,
  .nav-links a.active {
    background: #00f0ff;
    color: #000;
    transform: scale(1.05);
    box-shadow: 0 0 30px #ff00f7, 0 0 45px #00f0ff;
  }
}


/* 🌌 Hero Title */
.main-title-glow {
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: #ffffff;
  text-shadow: 0 0 25px #ff00f7, 0 0 40px #00f0ff;
  animation: glowPulse 6s ease-in-out infinite;
  margin-bottom: 1rem;
}
/* 🔥 Social Feed Container */
.social-feed-section {
  padding: 60px 20px;
  text-align: center;
  background: radial-gradient(circle at center, #10002b 0%, #240046 100%);
  border-top: 2px solid #00f0ff;
  border-bottom: 2px solid #ff00f7;
  box-shadow: 0 0 30px #00f0ff, 0 0 60px #ff00f7;
  border-radius: 30px;
  margin: 60px auto;
  max-width: 850px;
}

.social-feed-section h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 40px;
  text-shadow: 0 0 12px #ff00f7, 0 0 25px #00f0ff;
  animation: glowText 2s ease-in-out infinite alternate;
}

.social-embed-wrapper {
  display: flex;
  flex-direction: row; /* force horizontal */
  justify-content: center;
  gap: 40px;
  flex-wrap: nowrap; /* ❗ prevent stacking */
  align-items: flex-start;
}

.social-embed {
  background: #000000bb;
  border-radius: 20px;
  box-shadow: 0 0 20px #00f0ff, 0 0 30px #ff00f7;
  padding: 10px;
  width: 100%;
  max-width: 500px;
  min-width: 340px;
  height: 440px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.social-embed:hover {
  transform: scale(1.03);
}

/* Optional: Animate Title */
@keyframes glowText {
  from {
    text-shadow: 0 0 10px #00f0ff;
  }
  to {
    text-shadow: 0 0 30px #ff00f7;
  }
}

/* 🌠 Shooting Stars Background - KEEP THIS */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* ✨ Star Trail */
.shooting-star {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  opacity: 0;
  animation: shootStar 3s linear infinite;
  transform: rotate(45deg);
}

/* 🌌 Star Animation */
@keyframes shootStar {
  0% {
    transform: translateX(0) translateY(0) rotate(45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateX(-800px) translateY(800px) rotate(45deg);
    opacity: 0;
  }
}
/* 🛴 Scooter Animation */
.scooter-loop-wrapper {
  position: fixed;
  top: 100px;
  width: 100%;
  height: 150px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.jazz-scooter {
  position: absolute;
  height: 120px;
  animation: scooterLoop 15s linear infinite;
}

@keyframes scooterLoop {
  0% { left: 100%; opacity: 1; }
  90% { opacity: 1; }
  100% { left: -250px; opacity: 0; }
}

.store-wrapper {
  margin-top: 12rem; /* Adjust to control vertical spacing from nav */
}

/* 🛍️ Store Section Supreme */
.store-section {
  padding: 1rem 2rem 5rem;
  margin: 1rem auto;
  max-width: 1200px;
  text-align: center;
  background: linear-gradient(to bottom right, #0d0d0d, #111827);
  border-radius: 30px;
  box-shadow: 0 0 80px rgba(0, 240, 255, 0.08), inset 0 0 60px rgba(255, 0, 247, 0.04);
  animation: floatGlow 10s ease-in-out infinite;
}

/* 🛍️ Main Title Glow */
.store-section h1.main-title-glow {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 3.5rem;
  text-shadow: 0 0 30px #ff00f7, 0 0 60px #00f0ff;
  animation: megaPulse 6s infinite ease-in-out;
}

/* ✨ Section Sub-Headers */
.store-section h2 {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #00f0ff;
}

/* 🧊 Store Grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin: 2rem auto;
  max-width: 1100px;
}

/* 💎 Item Card */
.store-item {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 24px;
  border: 2px solid #00f0ff66;
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 20px #ff00f755, 0 0 40px #00f0ff55;
  animation: glowPulse 8s infinite ease-in-out;
}

.store-item:hover {
  transform: scale(1.035);
  box-shadow: 0 0 35px #00f0ffaa, 0 0 50px #ff00f7aa;
}

/* 🖼️ Images */
.store-item img {
  width: 100%;
  max-width: 260px;
  margin-bottom: 1rem;
  border-radius: 16px;
  box-shadow: 0 0 18px #00f0ff88;
}

/* 🔆 Glow Card Styling */
.store-item.glow-card {
  background: #0b0b0b;
  border: 2px solid #ff66c4;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 15px #ff66c4aa, 0 0 25px #6c00ff77;
  margin-bottom: 40px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-item.glow-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px #ff66c4, 0 0 35px #6c00ff;
}

.store-item.glow-card h3 {
  font-size: 1.4em;
  color: #ffffff;
  margin-top: 15px;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 6px #ff66c4;
}

.store-item.glow-card p {
  color: #ccc;
  margin: 12px 0;
  line-height: 1.5;
}

/* 🛍️ Buy Buttons */
.buy-button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.buy-btn {
  background: linear-gradient(to right, #ff66c4, #6c00ff);
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px #ff66c4aa;
  transition: background 0.3s ease, transform 0.3s ease;
}

.buy-btn:hover {
  background: linear-gradient(to right, #ff33cc, #9900ff);
  transform: scale(1.05);
  box-shadow: 0 0 15px #ff66c4, 0 0 25px #6c00ff;
}

/* 📕 Book Cover Image */
.book-cover-glow {
  width: 180px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 20px #ffffff44, 0 0 30px #ff66c4aa;
  margin-bottom: 10px;
}

/* 🎶 Titles */
.store-item h3 {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 6px #ff00f7;
}

/* 📖 Descriptions */
.store-item p {
  color: #cccccc;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-shadow: 0 0 4px #00f0ff55;
}

/* 🛒 Button Group */
.buy-button-group,
.theme-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* 💥 Buy Buttons */
.buy-btn {
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff00f7, #00f0ff);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
  transition: all 0.3s ease-in-out;
}

.buy-btn:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.07);
  box-shadow: 0 0 25px #ff00f7cc, 0 0 40px #00f0ffcc;
}

/* 🎧 Universal Audio Preview Popup */
#previewPlayerPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: #111;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 40px #00f0ff, 0 0 60px #ff00f7;
  z-index: 9999;
  display: none;
  max-width: 90%;
  text-align: center;
}

#previewPlayerPopup.show {
  display: block;
}

#previewPlayerPopup h2 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px #00f0ff;
}

#previewPlayerPopup button {
  margin-top: 1rem;
  padding: 10px 18px;
  font-size: 1rem;
  background: #ff00f7;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7;
}

#previewPlayerPopup audio {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 0 15px #00f0ff99;
}

/* 🌀 Animations */
@keyframes megaPulse {
  0%, 100% {
    text-shadow: 0 0 30px #ff00f7, 0 0 60px #00f0ff;
  }
  50% {
    text-shadow: 0 0 50px #00f0ff, 0 0 80px #ff00f7;
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px #00f0ff33, 0 0 40px #ff00f733;
  }
  50% {
    box-shadow: 0 0 35px #00f0ffaa, 0 0 60px #ff00f7aa;
  }
}

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

/* 📱 Responsive Cleanup */
@media screen and (max-width: 768px) {
  .store-item {
    padding: 1.5rem;
  }

  .buy-btn {
    font-size: 0.95rem;
    padding: 10px 18px;
  }

  #previewPlayerPopup {
    width: 90%;
  }
}

/* ✨ Fade Glow Animation */
@keyframes fadeInGlow {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.jazz-author-preview {
  max-width: 900px;
  margin: 4rem auto;
  padding: 2rem;
  background: linear-gradient(to right, #0d0d0d, #111827);
  border-radius: 30px;
  box-shadow: 0 0 40px rgba(255, 0, 247, 0.3), 0 0 20px rgba(0, 240, 255, 0.3);
  animation: floatGlow 12s ease-in-out infinite;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

.jazz-author-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.jazz-author-img {
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 0, 247, 0.3);
  animation: pulseGlow 6s infinite ease-in-out;
  background: #fff;
}

.jazz-author-text h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px #ff00f7;
}

.jazz-author-text p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.jazz-author-btn {
  padding: 0.75rem 1.5rem;
  background: #00f0ff;
  color: #000;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 0 15px #00f0ff, 0 0 5px #00f0ff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jazz-author-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px #ff00f7, 0 0 15px #00f0ff;
}

@keyframes floatGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 0, 247, 0.3), 0 0 20px rgba(0, 240, 255, 0.3); }
  50% { box-shadow: 0 0 60px rgba(255, 0, 247, 0.6), 0 0 40px rgba(0, 240, 255, 0.6); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ✏️ Floating Supplies */
.floating-supplies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.supply {
  position: absolute;
  font-size: 2rem;
  opacity: 0.6;
  animation: float 12s linear infinite;
}

.emoji1 { top: 10%; left: 5%; animation-delay: 0s; }
.emoji2 { top: 30%; left: 20%; animation-delay: 2s; }
.emoji3 { top: 50%; left: 70%; animation-delay: 4s; }
.emoji4 { top: 80%; left: 40%; animation-delay: 6s; }
.emoji5 { top: 60%; left: 10%; animation-delay: 1s; }
.emoji6 { top: 20%; left: 80%; animation-delay: 3s; }

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(-40px) rotate(10deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-10deg); opacity: 0.7; }
}

/* 🦶 Footer */
.site-footer {
  background-color: rgba(0, 0, 0, 0.85);
  padding: 25px 20px;
  color: white;
  text-align: center;
  border-top: 3px solid #00f0ff;
  box-shadow: 0 0 25px #ff00f7, 0 0 50px #00f0ff;
  margin-top: auto;
  z-index: 10;
  position: relative;
}

.footer-container {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-links a {
  color: #00f0ff;
  text-decoration: none;
  margin: 0 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ff00f7;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 6px;
  border-radius: 50%;
  border: 2px solid #00f0ff;
  font-size: 20px;
  color: #9a4397;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 12px #00f0ff, 0 0 18px #ae4dab;
  transition: all 0.3s ease-in-out;
  animation: glowPulse 2.5s infinite ease-in-out;
}

.social-icons a:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.2) rotate(5deg);
}
.youtube-section {
  text-align: center;
  padding: 5rem 2rem;
}

.youtube-banner {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 20px #00f0ff, 0 0 35px #ff00f7;
  margin-bottom: 2rem;
}

.youtube-intro {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #00f0ff;
}

.youtube-button-wrapper {
  margin-top: 1rem;
}

.subscribe-btn {
  background: #ff0000;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 15px #ff0000, 0 0 25px #fff;
  transition: all 0.3s ease;
}

.subscribe-btn:hover {
  background: #cc0000;
  transform: scale(1.05);
}

/* 🌈 Animations */
@keyframes floatPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes megaPulse {
  0%, 100% { text-shadow: 0 0 20px #ff00f7, 0 0 40px #00f0ff; }
  50% { text-shadow: 0 0 30px #00f0ff, 0 0 60px #ff00f7; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 25px #00f0ff55, 0 0 35px #ff00f755; }
  50% { box-shadow: 0 0 35px #ff00f799, 0 0 45px #00f0ff99; }
}

/* 📱 Responsive Cleanup */
@media screen and (max-width: 768px) {
  .store-item {
    padding: 1.5rem;
  }

  .buy-btn {
    font-size: 0.95rem;
    padding: 9px 18px;
  }

  .store-section {
    padding: 3rem 1rem;
  }
}


.popup-message {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-box {
  background: #111;
  padding: 1.2rem 1.5rem;
  max-width: 350px;
  width: 90%;
  border-radius: 16px;
  border: 2px solid #00f0ff;
  box-shadow: 0 0 18px #00f0ff, 0 0 28px #ff00f7;
  text-align: center;
  animation: fadeIn 0.4s ease-in-out;
}


.popup-box h2 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px #ff00f7;
}

.popup-box p {
  font-size: 1rem;
  color: #ccc;
  text-shadow: 0 0 5px #00f0ff;
}


.popup-box button {
  margin-top: 15px;
  background: #ff00f7;
  border: none;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 15px #00f0ff;
}

.popup-box button:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.05);
}

.popup-hidden {
  display: none !important;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -30%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* 🤖 Floating Lyric Character */
.floating-lyric {
  position: fixed;
  right: 20px;
  bottom: 150px;
  width: 200px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid #00f0ff;
  border-radius: 20px;
  box-shadow: 0 0 20px #ff00f7, 0 0 30px #00f0ff;
  text-align: center;
  z-index: 20;
  animation: floatPulse 4s ease-in-out infinite;
}

.lyric-intro {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 0 5px #ff00f7;
}

.lyric-img {
  width: 100px;
  height: auto;
  animation: bobble 3s ease-in-out infinite;
}
@media (max-width: 768px) {
  .floating-lyric {
    display: none !important;
  }
}

.lyric-quote {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #00f0ff;
  font-style: italic;
  text-shadow: 0 0 5px #00f0ff;
}

/* 💫 Animations */
@keyframes floatPulse {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

@keyframes bobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
/* 🛴 Scooter Loop Animation – Supreme Edition */
.scooter-loop-wrapper {
  position: fixed;
  top: 30px;
  width: 100%;
  height: 160px;
  overflow: visible;
  z-index: 9999; /* 🚀 way above everything */
  pointer-events: none;
}

/* ✨ Glowing Scooter Image */
.jazz-scooter {
  position: absolute;
  height: 130px;
  animation: scooterLoop 15s linear infinite;
  filter: drop-shadow(0 0 10px #00f0ff) drop-shadow(0 0 20px #ff00f7);
  transform: scale(1.1);
}


/* 🔄 Looping Leftwards */
@keyframes scooterLoop {
  0% {
    left: 100%;
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: -250px;
    opacity: 0;
  }
}
#mouseTrailCanvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}
/* ==========================================
   📧 Signup Section – Supreme Jazz Edition
========================================== */
.signup-section {
  padding: 6rem 2rem;
  text-align: center;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.1), transparent);
}

/* 🔥 Ultra Supreme Signup Heading */
.signup-heading {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  text-align: center;
  padding: 1rem 2rem;
  margin-bottom: 2rem;

  background: linear-gradient(90deg, #ff00f7, #00f0ff, #ff00f7);
  background-size: 400% 100%;

  /* ✅ Proper gradient text clip */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
  animation: headingGradientFlow 5s ease-in-out infinite, headingPopBounce 1s ease-out;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

/* 📦 Supreme Glowing Signup Box Container */
.glowing-signup-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 2rem;
  border: 4px solid #00f0ff;
  border-radius: 30px;
  background: radial-gradient(circle at top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
  box-shadow:
    0 0 25px #00f0ff,
    0 0 40px #ff00f7,
    0 0 60px #00f0ff,
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  animation: pulseGlowBox 8s ease-in-out infinite;
  transition: all 0.3s ease-in-out;
}

/* 🌟 Glowing Box Animation */
@keyframes pulseGlowBox {
  0% {
    box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00f7, 0 0 60px #00f0ff, inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 40px #ff00f7, 0 0 70px #00f0ff, 0 0 100px #ff00f7, inset 0 0 40px rgba(255, 255, 255, 0.15);
  }
  100% {
    box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00f7, 0 0 60px #00f0ff, inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
}

/* 🎨 Glowing Gradient Animation */
@keyframes headingGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 💥 Pop-in Scale Bounce */
@keyframes headingPopBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}


/* 💫 Glowing Signup Box */
.glow-signup-box {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.6);
  padding: 30px 50px;
  border: 3px solid #00f0ff;
  border-radius: 20px;
  box-shadow: 0 0 20px #ff00f7, 0 0 40px #00f0ff;
  animation: floatPulse 6s ease-in-out infinite;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* 🧠 Signup Form Inputs */
.signup-form input {
  padding: 16px 25px;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  outline: none;
  width: 160px;
  background: #111;
  color: #fff;
  box-shadow: 0 0 10px #00f0ff;
  border: 2px solid #00f0ff;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.signup-form input:focus {
  box-shadow: 0 0 20px #ff00f7, 0 0 30px #00f0ff;
  transform: scale(1.02);
}

/* 📚 Signup Button */
.signup-form button {
  background: linear-gradient(135deg, #ff00f7, #00f0ff);
  color: #fff;
  padding: 12px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 20px #ff00f7, 0 0 35px #00f0ff;
  transition: all 0.3s ease-in-out;
  text-shadow: 0 0 5px #000;
}

.signup-form button:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.05);
  box-shadow: 0 0 25px #ff00f7, 0 0 45px #00f0ff;
}


/* 📺 Lyric Video Section */
.lyric-video-section {
  padding: 6rem 2rem;
  text-align: center;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.05), transparent);
  animation: floatPulse 6s ease-in-out infinite;
}

.video-wrapper {
  position: relative;
  display: inline-block;
  max-width: 760px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 25px #00f0ff, 0 0 45px #ff00f7;
  border: 3px solid #00f0ff;
  background: rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.video-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 0 35px #ff00f7, 0 0 60px #00f0ff;
}

.lyric-video {
  width: 100%;
  height: auto;
  border: none;
  display: block;
  border-radius: 20px;
}

/* Responsive Video Adjustments */
@media (max-width: 768px) {
  .video-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .lyric-video-section {
    padding: 4rem 1rem;
  }
}
/* ✨ Hero Section Supreme Flow */
.hero-section {
  padding: 8rem 2rem 6rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
  position: relative;
  z-index: 2;
  animation: floatPulse 8s ease-in-out infinite;
}

/* 🌟 Glowing Hero Title */
.main-title-glow {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    0 0 12px #ff00f7,
    0 0 22px #00f0ff,
    0 0 42px #ff00f7,
    0 0 80px #00f0ff;
  animation: megaPulse 4s infinite ease-in-out, flickerGlow 8s infinite ease-in-out;
}

/* 🪄 Hero Subtext */
.hero-section p {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  color: #00f0ff;
  text-shadow:
    0 0 8px #ff00f7,
    0 0 12px #00f0ff;
  animation: textFloat 6s infinite alternate ease-in-out;
}

/* 🔁 Supreme Animations */
@keyframes megaPulse {
  0% { text-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7; }
  50% { text-shadow: 0 0 30px #ff00f7, 0 0 60px #00f0ff; }
  100% { text-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7; }
}

@keyframes textFloat {
  0% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.9; }
}

@keyframes flickerGlow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px #00f0ff); }
  45% { opacity: 0.95; filter: drop-shadow(0 0 20px #ff00f7); }
  70% { opacity: 1; filter: drop-shadow(0 0 30px #00f0ff); }
}
.about-section {
  padding: 7rem 2rem 12rem;
  margin-top: 120px;
  text-align: center;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.05), transparent);
  animation: floatPulse 8s ease-in-out infinite;
}


/* 🌟 Glowing Heading */
.about-section .main-title-glow {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    0 0 15px #ff00f7,
    0 0 30px #00f0ff,
    0 0 60px #ff00f7;
  margin-bottom: 2.5rem;
  animation: megaPulse 4s infinite ease-in-out;
}

/* ✨ Glowing Box Container */
.about-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background: rgba(0, 0, 0, 0.7);
  border: 3px solid #00f0ff;
  border-radius: 25px;
  box-shadow:
    0 0 20px #00f0ff,
    0 0 40px #ff00f7,
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  text-align: left;
  font-size: 1.2rem;
  color: #ffffff;
  line-height: 1.75;
  animation: glowPulse 6s ease-in-out infinite;
}

/* 📝 Paragraphs */
.about-content p {
  margin-bottom: 1.5rem;
  text-shadow: 0 0 5px #00f0ff;
}

.about-content strong {
  color: #ff00f7;
  text-shadow: 0 0 10px #ff00f7;
}

/* 🔗 Links */
.about-content a {
  color: #00f0ff;
  font-weight: bold;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.about-content a:hover {
  color: #ff00f7;
  text-shadow: 0 0 10px #ff00f7;
}

/* 🔁 Glow Animations */
@keyframes megaPulse {
  0% {
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7;
  }
  50% {
    text-shadow: 0 0 25px #ff00f7, 0 0 45px #00f0ff;
  }
  100% {
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00f7;
  }
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
  }
  50% {
    box-shadow: 0 0 30px #ff00f7, 0 0 60px #00f0ff;
  }
  100% {
    box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
  }
}
/* 🎥 Supreme YouTube Section */
.youtube-section {
  padding: 15rem 2rem 6rem;
  background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08), transparent);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: floatPulse 6s infinite ease-in-out;
  text-align: center;
}

/* 🌟 Enhanced Glow Title */
.youtube-section .main-title-glow {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  text-shadow:
    0 0 10px #00f0ff,
    0 0 25px #ff00f7,
    0 0 50px #00f0ff;
  margin-bottom: 2rem;
  animation: megaPulse 5s infinite ease-in-out;
}

/* 🔲 Glowing Container */
.youtube-section .glow-box {
  background: rgba(0, 0, 0, 0.8);
  padding: 3.5rem 2rem;
  max-width: 600px;
  width: 100%;
  border: 2px solid #00f0ff;
  border-radius: 30px;
  box-shadow:
    0 0 25px #00f0ff,
    0 0 50px #ff00f7,
    inset 0 0 25px rgba(255, 255, 255, 0.08);
  animation: glowBoxPulse 6s ease-in-out infinite;
}

/* 🎞️ Video Thumbnail or Banner */
.youtube-banner {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 25px #00f0ff, 0 0 45px #ff00f7;
  transition: transform 0.4s ease;
}
.youtube-banner:hover {
  transform: scale(1.02);
}

/* ✨ Intro Paragraph */
.youtube-intro {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #ffffff;
  text-shadow: 0 0 10px #00f0ff;
  margin-bottom: 2rem;
}

/* 📺 Glowing Subscribe Button */
.youtube-button-wrapper {
  margin-top: 2rem;
}
.subscribe-btn {
  display: inline-block;
  padding: 16px 36px;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 16px;
  box-shadow: 0 0 20px #ff00f7, 0 0 30px #00f0ff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  animation: buttonPulse 3s infinite;
}
.subscribe-btn:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.08);
  box-shadow: 0 0 35px #00f0ff, 0 0 60px #ff00f7;
}

/* 🔄 Animations */
@keyframes glowBoxPulse {
  0% {
    box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00f7, inset 0 0 15px rgba(255,255,255,0.1);
  }
  50% {
    box-shadow: 0 0 35px #ff00f7, 0 0 70px #00f0ff, inset 0 0 30px rgba(255,255,255,0.15);
  }
  100% {
    box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00f7, inset 0 0 15px rgba(255,255,255,0.1);
  }
}

@keyframes buttonPulse {
  0% { box-shadow: 0 0 10px #ff00f7; }
  50% { box-shadow: 0 0 25px #00f0ff; }
  100% { box-shadow: 0 0 10px #ff00f7; }
}

@keyframes megaPulse {
  0% { text-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7; }
  50% { text-shadow: 0 0 35px #ff00f7, 0 0 55px #00f0ff; }
  100% { text-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7; }
}

/* 💌 Contact Section Supreme Style */
.contact-section {
  padding: 7rem 2rem 6rem;
  text-align: center;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.05), transparent);
  animation: floatPulse 6s ease-in-out infinite;
}

.contact-section h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: #ffffff;
  margin-bottom: 2.5rem;
  text-shadow: 0 0 20px #ff00f7, 0 0 40px #00f0ff, 0 0 60px #ff00f7;
  animation: megaPulse 4s ease-in-out infinite;
}

/* 💫 Glowing Form Container */
.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background: rgba(0, 0, 0, 0.75);
  border: 3px solid #00f0ff;
  border-radius: 25px;
  box-shadow: 0 0 25px #00f0ff, 0 0 50px #ff00f7, inset 0 0 20px rgba(255,255,255,0.1);
  animation: glowBoxPulse 6s ease-in-out infinite;
}

.form-intro {
  color: #ccc;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 8px #00f0ff;
}

/* 📝 Form Fields */
.contact-form-container form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.contact-form-container input,
.contact-form-container textarea {
  padding: 14px 20px;
  font-size: 1rem;
  border: 2px solid #00f0ff;
  border-radius: 12px;
  background: #111;
  color: #fff;
  box-shadow: 0 0 10px #00f0ff;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  resize: vertical;
  width: 100%;
  max-width: 70%;
  margin: 0 auto; /* ✅ Centers element horizontally */
}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
  box-shadow: 0 0 25px #ff00f7, 0 0 40px #00f0ff;
  transform: scale(1.01);
}

/* 🚀 Send Button Supreme */
.contact-form-container button {
  background: linear-gradient(135deg, #ff00f7, #00f0ff);
  color: white;
  padding: 14px 24px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 20px #ff00f7, 0 0 35px #00f0ff;
  transition: all 0.3s ease-in-out;
  animation: buttonPulse 3s infinite;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* 🖱️ Hover */
.contact-form-container button:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.05);
  box-shadow: 0 0 30px #ff00f7, 0 0 50px #00f0ff;
}

#popupMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  padding: 2rem;
  animation: fadeIn 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

.popup-hidden {
  display: none !important;
}

/* 💎 Inside Box */
#popupMessage .popup-box {
  background: #111;
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  border-radius: 20px;
  border: 3px solid #00f0ff;
  box-shadow: 0 0 25px #00f0ff, 0 0 45px #ff00f7;
  text-align: center;
  animation: glowBoxPulse 4s ease-in-out infinite;
}

/* ✨ Message Text */
#popupMessage h2 {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 12px #ff00f7;
}

#popupMessage p {
  font-size: 1.05rem;
  color: #ccc;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px #00f0ff;
}

/* ✋ Close Button */
#popupMessage button {
  background: #ff00f7;
  border: none;
  color: white;
  padding: 10px 24px;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 15px #00f0ff;
  transition: all 0.3s ease-in-out;
}

#popupMessage button:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.05);
}

/* 🔄 Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glowBoxPulse {
  0%   { box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00f7; }
  50%  { box-shadow: 0 0 35px #ff00f7, 0 0 65px #00f0ff; }
  100% { box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00f7; }
}

/* 🎯 Memory Game Section */
.memory-game-section {
  padding: 7rem 2rem 5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* 💫 Compact Glowing Box Container */
.memory-glow-box {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.75);
  border: 3px solid #00f0ff;
  box-shadow:
    0 0 18px #00f0ff,
    0 0 35px #ff00f7,
    inset 0 0 10px rgba(255, 255, 255, 0.05);
  animation: pulseBoxGlow 6s infinite ease-in-out;
}


/* 🧠 Game Title */
.game-title {
  font-size: clamp(2rem, 6vw, 3rem);
  color: #fff;
  margin-bottom: 1rem;
  text-shadow:
    0 0 12px #ff00f7,
    0 0 25px #00f0ff;
}

/* 🎨 Subtitle */
.game-subtitle {
  font-size: 1.2rem;
  color: #ccc;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #00f0ff;
}

/* 🔁 Restart Button */
.restart-btn {
  background: linear-gradient(135deg, #ff00f7, #00f0ff);
  color: white;
  padding: 12px 26px;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 2.5rem;
  box-shadow: 0 0 20px #00f0ff, 0 0 35px #ff00f7;
  transition: all 0.3s ease-in-out;
}

.restart-btn:hover {
  background: #00f0ff;
  color: #000;
  transform: scale(1.07);
}

/* 🎴 Fixed 4x4 Card Grid */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 100px); /* 4 columns */
  grid-template-rows: repeat(4, 140px);    /* 4 rows */
  gap: 20px;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}


/* 🃏 Card Setup */
.memory-card {
  width: 90px;
  height: 130px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.memory-card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* 🌟 Card Faces */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 10px #00f0ff, 0 0 25px rgba(255, 0, 247, 0.5);
}

/* 🖼️ Front – Logo */
.card-front {
  background: #111;
  z-index: 2;
}

.card-front-img {
  width: 60%;
  height: auto;
  filter: drop-shadow(0 0 8px #ff00f7);
}

/* 🧠 Back – Revealed emoji */
.card-back {
  background: linear-gradient(135deg, #00f0ff, #ff00f7);
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}

/* 🎉 Win Popup */
.win-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.win-popup .win-box {
  background: #111;
  padding: 2rem 3rem;
  border-radius: 25px;
  border: 3px solid #00f0ff;
  box-shadow: 0 0 30px #ff00f7, 0 0 50px #00f0ff;
  text-align: center;
  animation: fadeIn 0.6s ease-in-out;
}

.win-box h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 12px #ff00f7;
}

/* 🎇 Animations */
@keyframes pulseBoxGlow {
  0% {
    box-shadow: 0 0 15px #00f0ff, 0 0 30px #ff00f7;
  }
  50% {
    box-shadow: 0 0 30px #ff00f7, 0 0 45px #00f0ff;
  }
  100% {
    box-shadow: 0 0 15px #00f0ff, 0 0 30px #ff00f7;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 🕶️ Hide utility */
.popup-hidden {
  display: none !important;
}
@media (max-width: 600px) {
  .memory-grid {
    grid-template-columns: repeat(4, 70px); /* smaller cards */
    grid-template-rows: repeat(4, 100px);
    gap: 12px;
    justify-content: center;
    align-content: center;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .memory-glow-box {
    padding: 1.5rem 1rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 🌐 Responsive Enhancement */
@media (max-width: 500px) {
  .memory-card {
    width: 70px;
    height: 100px;
  }

  .game-title {
    font-size: 2rem;
  }

  .game-subtitle {
    font-size: 1rem;
  }

  .restart-btn {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
}

/* 📜 Policy Page Container */
.policy-section {
  padding: 1rem 2rem 9rem;
  max-width: 800px;
  margin: 12rem auto 6rem auto; /* ⬅️ Top: 8rem, Bottom: 6rem */
  background: rgba(0, 0, 0, 0.8);
  border: 3px solid #00f0ff;
  border-radius: 20px;
  box-shadow: 0 0 25px #00f0ff, 0 0 50px #ff00f7;
  color: #ffffff;
  line-height: 1.5;
  animation: glowBoxPulse 6s infinite;
  backdrop-filter: blur(4px);
}


/* 🔥 Policy Heading */
.policy-section h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
  margin-bottom: 3rem;
  color: #00f0ff;
  text-shadow: 0 0 10px #ff00f7, 0 0 25px #00f0ff;
  animation: megaPulse 4s ease-in-out infinite;
}

/* 📝 Subheadings */
.policy-section h2 {
  font-size: 1.6rem;
  color: #ff00f7;
  margin-top: 2rem;
  text-shadow: 0 0 10px #00f0ff;
}

/* 📄 Paragraph Text */
.policy-section p {
  margin: 1rem 0;
  font-size: 1.05rem;
  color: #ccc;
  text-shadow: 0 0 5px #00f0ff;
}

/* 💎 Bullet Lists */
.policy-section ul {
  padding-left: 1.5rem;
}

.policy-section li {
  margin-bottom: 0.5rem;
  list-style: square;
  color: #fff;
}

/* ✨ Animations */
@keyframes glowBoxPulse {
  0% {
    box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
  }
  50% {
    box-shadow: 0 0 35px #ff00f7, 0 0 50px #00f0ff;
  }
  100% {
    box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
  }
}

@keyframes megaPulse {
  0%, 100% {
    text-shadow: 0 0 10px #ff00f7, 0 0 25px #00f0ff;
  }
  50% {
    text-shadow: 0 0 30px #00f0ff, 0 0 50px #ff00f7;
  }
}

/* 📄 Terms of Service Section */
.terms-section {
  padding: 1rem 2rem 9rem;
  max-width: 800px;
  margin: 12rem auto 6rem auto; /* ⬅️ Top: 8rem, Bottom: 6rem */
  background: rgba(0, 0, 0, 0.8);
  border: 3px solid #00f0ff;
  border-radius: 20px;
  box-shadow: 0 0 25px #00f0ff, 0 0 50px #ff00f7;
  color: #ffffff;
  line-height: 1.5;
  animation: glowBoxPulse 6s infinite;
  backdrop-filter: blur(4px);
}

/* ✨ Main Heading */
.terms-section h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
  margin-bottom: 2rem;
  color: #ff00f7;
  text-shadow: 0 0 15px #00f0ff, 0 0 30px #ff00f7;
  animation: megaPulse 4s ease-in-out infinite;
}

/* 🧾 Subheadings */
.terms-section h2 {
  font-size: 1.5rem;
  color: #00f0ff;
  margin-top: 2rem;
  text-shadow: 0 0 10px #ff00f7;
}

/* 📘 Body Text */
.terms-section p {
  font-size: 1.05rem;
  color: #ccc;
  margin: 1rem 0;
  text-shadow: 0 0 5px #00f0ff;
}

/* 📋 Bullet Lists */
.terms-section ul {
  padding-left: 1.5rem;
}

.terms-section li {
  margin-bottom: 0.6rem;
  list-style-type: disc;
  color: #fff;
  text-shadow: 0 0 4px #ff00f7;
}

/* ✨ Reuse Animations */
@keyframes glowBoxPulse {
  0% {
    box-shadow: 0 0 20px #00f0ff, 0 0 35px #ff00f7;
  }
  50% {
    box-shadow: 0 0 40px #ff00f7, 0 0 60px #00f0ff;
  }
  100% {
    box-shadow: 0 0 20px #00f0ff, 0 0 35px #ff00f7;
  }
}

@keyframes megaPulse {
  0%, 100% {
    text-shadow: 0 0 15px #ff00f7, 0 0 30px #00f0ff;
  }
  50% {
    text-shadow: 0 0 35px #00f0ff, 0 0 55px #ff00f7;
  }
}

/* 🌌 Base Layout */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(to bottom right, #0b0c2a, #1f0037);
  color: #ffffff;
  height: 100%;
  overflow-x: hidden;
  text-align: center;
}

/* 🌟 Glow Utility */
.glow {
  text-shadow: 0 0 10px #ffffff, 0 0 20px #ff00f7, 0 0 30px #00f0ff;
}

/* 🧱 Admin Container */
.admin-container {
  max-width: 1000px;
  margin: 1rem auto;
  padding: 40px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  box-shadow: 0 0 25px #00f0ff, 0 0 45px #ff00f7;
}

/* 📊 Inventory Table */
.inventory-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.inventory-table th, .inventory-table td {
  padding: 14px;
  border: 1px solid #ffffff33;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
}

.inventory-table th {
  background: rgba(0, 255, 255, 0.1);
  font-weight: bold;
}

.inventory-table tr:hover {
  background: rgba(255, 0, 255, 0.2);
}

/* 🎛️ Buttons */
button, .btn {
  padding: 12px 24px;
  background: linear-gradient(to right, #00f0ff, #ff00f7);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px #00f0ff, 0 0 25px #ff00f7;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #ffffff, 0 0 45px #ff00f7;
}

/* 🛡️ Login Box */
.login-container {
  max-width: 500px;
  margin: 8rem auto;
  padding: 3rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  box-shadow: 0 0 20px #00f0ff, 0 0 35px #ff00f7;
}

.login-container input {
  width: 80%;
  padding: 12px;
  margin: 12px 0;
  border-radius: 10px;
  border: none;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.login-container input:focus {
  outline: none;
  box-shadow: 0 0 12px #00f0ff;
}

/* 📥 Export Box */
.export-section {
  margin-top: 40px;
}

/* 📲 Responsive */
@media (max-width: 768px) {
  .admin-container, .login-container {
    padding: 20px;
    width: 90%;
  }

  .inventory-table th, .inventory-table td {
    font-size: 0.85rem;
    padding: 8px;
  }

  .login-container input {
    width: 95%;
  }
}