/* =======================================
   ROOT VARIABLES & GLOBAL RESET
======================================= */
:root {
  --blue-deep: #020617;
  --blue-main: #1E3A8A;
  --blue-soft: #0b1120;
  --gold: #FACC15;
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --card-bg: #020617;
  --border-soft: rgba(148,163,184,0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #1E3A8A 0, #020617 55%, #020617 100%);
  color: var(--text-main);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Utility container */
.container {
  max-width: 1200px;
  margin: 22px auto 40px;
  padding: 0 20px 40px;
}

/* Generic card */
.card {
  background: radial-gradient(circle at top left, rgba(248,250,252,0.06), rgba(15,23,42,0.98));
  border-radius: 18px;
  padding: 22px 22px 20px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 30px 80px -45px rgba(15,23,42,0.9);
}

/* Buttons */
.btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary {
  background: linear-gradient(to right, #FACC15, #fbbf24);
  color: #111827;
}

.btn-ghost {
  background: rgba(15,23,42,0.7);
  border: 1px solid rgba(148,163,184,0.5);
  color: var(--text-main);
}

.hero-text {
  color: var(--text-muted);
  font-size: 0.97rem;
}

/* Footer */
.footer-main {
  border-top: 1px solid rgba(148,163,184,0.4);
  padding: 18px 20px 26px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.footer-text {
  margin-bottom: 6px;
}

/* Section spacing helpers */
.section-block {
  margin-top: 50px;
  margin-bottom: 50px;
}

.jch-ad-block {
  margin: 40px 0;
}

.featured-song-section {
  margin-top: 60px;
}

/* Responsive */
@media (max-width: 600px) {
  .container {
    padding: 0 16px 32px;
  }
}
/* Hide mobile player on desktop */
@media (min-width: 768px) {
    #jch-mobile-player {
        display: none !important;
    }
}

/* Mobile: show only on small screens */
@media (max-width: 767px) {
    #jch-mobile-player {
        display: block !important;
    }
}