/* =========================================================
   RARE COLOUR PALETTE:
   - Deep Cosmic Indigo (Background): #0B0A1A
   - Card Midnight Glow (Container): #14112B
   - Bioluminescent Cyan (Accent Main): #00F0FF
   - Electric Lavender (Accent Soft): #A855F7
   - Neon Magenta (Glow Accent): #FF007F
   - Starlight Violet (Text): #E0E0FF
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: #E0E0FF;
    background-color: #0B0A1A;
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(168, 85, 247, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(0, 240, 255, 0.12) 0%, transparent 40%);
    background-attachment: fixed;
    padding: 20px;
    min-height: 100vh;
    overflow-x: hidden;
}

header, main, footer {
    max-width: 800px;
    margin: 25px auto;
    background: rgba(20, 17, 43, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5),
                0 0 15px rgba(168, 85, 247, 0.15);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

header:hover, main:hover, footer:hover {
    border-color: rgba(0, 240, 255, 0.4);
}

h1 {
    color: #00F0FF;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6),
                 0 0 20px rgba(0, 240, 255, 0.3);
    letter-spacing: 1px;
}

h2 {
    color: #A855F7;
    margin-top: 20px;
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

p {
    margin-bottom: 15px;
    color: #C3C2E5;
}

/* Digital Neighbours styling */
.neighbours-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.neighbours-container a {
    display: inline-block;
    border-radius: 8px;
    padding: 3px;
    background: linear-gradient(135deg, #00F0FF, #FF007F);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.neighbours-container a:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.8),
                0 0 30px rgba(0, 240, 255, 0.8);
}

.neighbours-container img {
    border: none;
    display: block;
    border-radius: 6px;
}

/* Floating Sparkling Stars generated by JS */
.star-sparkle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF 10%, #00F0FF 60%, transparent 100%);
    box-shadow: 0 0 10px #00F0FF, 0 0 20px #FF007F;
    animation: popFade 1.2s forwards cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 9999;
}

@keyframes popFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(360deg);
    }
}