/* GlowFM Birthday Edition - 1. September */
:root {
    --birthday-gold: #ffd166;
    --birthday-pink: #ff4fd8;
    --birthday-purple: #8b5cf6;
    --birthday-cyan: #22d3ee;
    --primary: #ff4fd8;
    --primary-dark: #c026d3;
    --primary-light: #f9a8d4;
    --primary-glow: #ff4fd8;
    --secondary-glow: #8b5cf6;
    --purple-glow: #a855f7;
    --cyan-glow: #22d3ee;
    --pink-glow: #ff4fd8;
    --accent-glow: #ffd166;
    --accent: #ffd166;
    --gradient: linear-gradient(135deg, #ffd166 0%, #ff4fd8 48%, #8b5cf6 100%);
    --gradient-warm: linear-gradient(135deg, #fff0b8, #ffd166 45%, #ff7a59);
    --gradient-neon: linear-gradient(135deg, #22d3ee, #8b5cf6 48%, #ff4fd8);
    --gradient-cosmic: linear-gradient(135deg, #ffd166, #ff4fd8 46%, #8b5cf6 78%, #22d3ee);
    --shadow-glow: 0 0 34px rgba(255, 79, 216, 0.34), 0 0 70px rgba(139, 92, 246, 0.16);
    --shadow-glow-strong: 0 0 24px rgba(255, 209, 102, 0.48), 0 0 70px rgba(255, 79, 216, 0.34);
    --shadow-glow-purple: 0 0 45px rgba(139, 92, 246, 0.42);
}

html {
    background: #080311;
    scroll-behavior: smooth;
}

html::before {
    content: "✦  GLOWFM GEBURTSTAG  ·  1. SEPTEMBER  ·  WIR FEIERN MIT EUCH  ✦";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    min-height: 2.55rem;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.2), transparent 20% 80%, rgba(255,255,255,0.2)),
        linear-gradient(105deg, #ffd166, #ff9f43 30%, #ff4fd8 65%, #8b5cf6);
    box-shadow: 0 8px 32px rgba(255, 79, 216, 0.34), 0 2px 14px rgba(255, 209, 102, 0.32);
    color: #17051d;
    font: 900 clamp(0.68rem, 1.8vw, 0.84rem)/1.1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: clamp(0.06em, 0.35vw, 0.18em);
    text-align: center;
    text-shadow: 0 1px rgba(255, 255, 255, 0.45);
}

body {
    padding-top: 2.55rem !important;
    background-color: #090414 !important;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(255, 209, 102, 0.09) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 22%, rgba(255, 79, 216, 0.11) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 80%, rgba(34, 211, 238, 0.09) 0 2px, transparent 3px),
        radial-gradient(ellipse at 18% 12%, rgba(255, 79, 216, 0.19), transparent 42%),
        radial-gradient(ellipse at 84% 30%, rgba(139, 92, 246, 0.22), transparent 46%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 209, 102, 0.1), transparent 44%),
        linear-gradient(145deg, #0d0619 0%, #090414 48%, #07101d 100%) !important;
    background-size: 72px 72px, 96px 96px, 120px 120px, auto, auto, auto, auto !important;
}

.navbar {
    top: 2.55rem !important;
    border-bottom-color: rgba(255, 209, 102, 0.28) !important;
    background: linear-gradient(90deg, rgba(13, 6, 25, 0.92), rgba(34, 8, 48, 0.88), rgba(9, 16, 29, 0.92)) !important;
    box-shadow: 0 12px 38px rgba(10, 2, 20, 0.5), 0 1px 22px rgba(255, 79, 216, 0.12) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
}

.nav-logo,
.logo-text,
h1,
.hero-title,
.section-title {
    text-shadow: 0 0 18px rgba(255, 79, 216, 0.34), 0 0 36px rgba(255, 209, 102, 0.14) !important;
}

.hero-title,
.section-title,
.glow-text {
    background-image: var(--gradient-cosmic) !important;
    background-size: 180% auto !important;
}

/* Keep the compact navigation logo transparent. A gradient background on the
   whole flex item hides the pink "FM" lettering and looks like clipping. */
.nav-logo,
.nav-logo h1 {
    background: transparent !important;
}

.nav-logo {
    flex: 0 0 auto;
    min-width: max-content;
}

.logo,
.station-logo {
    filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.46)) drop-shadow(0 0 18px rgba(255, 79, 216, 0.3));
}

.nav-link::after {
    background: var(--gradient-warm) !important;
    box-shadow: 0 0 14px rgba(255, 209, 102, 0.48);
}

.nav-link:hover,
.nav-link.active {
    color: #fff4c7 !important;
    text-shadow: 0 0 14px rgba(255, 209, 102, 0.5);
}

.nav-badge,
.badge-neu,
.partner-badge {
    background: var(--gradient-warm) !important;
    color: #21091f !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 18px rgba(255, 209, 102, 0.42) !important;
}

.hero,
.main-content,
main,
.container {
    position: relative;
}

.hero::after,
.main-content::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: max(1rem, 4vw);
    width: clamp(70px, 9vw, 120px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 2%, transparent 3%),
        repeating-conic-gradient(from 0deg, #ffd166 0 5deg, transparent 5deg 14deg),
        radial-gradient(circle, rgba(255,79,216,0.22), transparent 64%);
    opacity: 0.32;
    filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.32));
    pointer-events: none;
    animation: birthdaySpin 26s linear infinite;
}

.card,
.feature-card,
.glass-card,
.player-card,
.stats-card,
.glow-card,
.schedule-card,
.contact-card,
.info-card,
.form-box,
.download-card,
.legal-card,
.changelog-card {
    border-color: rgba(255, 209, 102, 0.24) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 79, 216, 0.035)) !important;
    box-shadow: 0 22px 60px rgba(5, 2, 12, 0.42), inset 0 1px rgba(255,255,255,0.08), 0 0 34px rgba(139, 92, 246, 0.08) !important;
    backdrop-filter: blur(14px) saturate(130%);
}

.card:hover,
.feature-card:hover,
.player-card:hover,
.glow-card:hover,
.schedule-card:hover,
.download-card:hover,
.changelog-card:hover {
    border-color: rgba(255, 209, 102, 0.56) !important;
    box-shadow: 0 26px 70px rgba(5, 2, 12, 0.5), 0 0 28px rgba(255, 79, 216, 0.18), 0 0 48px rgba(255, 209, 102, 0.11) !important;
}

button,
.btn,
.button,
.cta-button,
.play-button,
.submit-btn,
input[type="submit"] {
    border-color: rgba(255, 255, 255, 0.32) !important;
    background-image: var(--gradient) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(255, 79, 216, 0.24), 0 0 22px rgba(255, 209, 102, 0.12) !important;
    text-shadow: 0 1px 4px rgba(39, 3, 38, 0.42);
}

button:hover,
.btn:hover,
.button:hover,
.cta-button:hover,
.play-button:hover,
.submit-btn:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 16px 38px rgba(255, 79, 216, 0.34), 0 0 28px rgba(255, 209, 102, 0.24) !important;
}

input,
textarea,
select {
    border-color: rgba(255, 209, 102, 0.26) !important;
    background-color: rgba(12, 6, 25, 0.72) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--birthday-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.12), 0 0 24px rgba(255, 79, 216, 0.13) !important;
    outline: none;
}

::selection {
    background: rgba(255, 79, 216, 0.72);
    color: #fffbe8;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#ffd166, #ff4fd8, #8b5cf6) !important;
    border-radius: 999px;
}

@keyframes birthdaySpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    html::before {
        min-height: 2.35rem;
        padding-inline: 0.5rem;
        font-size: 0.62rem;
        letter-spacing: 0.055em;
    }

    body { padding-top: 2.35rem !important; }
    .navbar { top: 2.35rem !important; }
    .hero::after, .main-content::after { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero::after, .main-content::after { animation: none; }
}