body {
    font-family: 'Inter', sans-serif;
    background-color: #000;
    background-image: url('imgs/bg_img_thumb.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.glass-card {
    background: rgba(255, 255, 255, 0.08);
    /* Simpler and slightly more opaque for fallback */
    backdrop-filter: blur(2px) saturate(120%);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
}

/* Fallback noise texture to imitate the glass effect for ALL browsers safely */
.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='white' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.link-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.link-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: all 0.5s ease;
}

.link-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
}

.link-btn:hover::before {
    left: 100%;
}

/* Individual Brand Network Colors */
.link-btn.instagram:hover {
    border-color: #E1306C;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(225, 48, 108, 0.5);
}

.link-btn.instagram:hover .link-icon,
.link-btn.instagram:hover span {
    color: #E1306C !important;
}

.link-btn.artstation:hover {
    border-color: #13AFF0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(19, 175, 240, 0.5);
}

.link-btn.artstation:hover .link-icon,
.link-btn.artstation:hover span {
    color: #13AFF0 !important;
}

.link-btn.telegram:hover {
    border-color: #26A5E4;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(38, 165, 228, 0.5);
}

.link-btn.telegram:hover .link-icon,
.link-btn.telegram:hover span {
    color: #26A5E4 !important;
}

.link-btn.linkedin:hover {
    border-color: #0077b5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 119, 181, 0.5);
}

.link-btn.linkedin:hover .link-icon,
.link-btn.linkedin:hover span {
    color: #0077b5 !important;
}

.link-btn.facebook:hover {
    border-color: #1877F2;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(24, 119, 242, 0.5);
}

.link-btn.facebook:hover .link-icon,
.link-btn.facebook:hover span {
    color: #1877F2 !important;
}

.link-btn.twitter:hover {
    border-color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.5);
}

.link-btn.twitter:hover .link-icon,
.link-btn.twitter:hover span {
    color: #ffffff !important;
}

.link-btn.youtube:hover {
    border-color: #FF0000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 0, 0, 0.5);
}

.link-btn.youtube:hover .link-icon,
.link-btn.youtube:hover span {
    color: #FF0000 !important;
}

.link-btn.github:hover {
    border-color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.5);
}

.link-btn.github:hover .link-icon,
.link-btn.github:hover span {
    color: #ffffff !important;
}

.link-btn.discord:hover {
    border-color: #5865F2;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(88, 101, 242, 0.5);
}

.link-btn.discord:hover .link-icon,
.link-btn.discord:hover span {
    color: #5865F2 !important;
}

.link-btn.email:hover {
    border-color: #BCF600;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(188, 246, 0, 0.5);
}

.link-btn.email:hover .link-icon,
.link-btn.email:hover span {
    color: #BCF600 !important;
}

.link-btn span {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-icon {
    font-size: 1.25rem;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Mobile: hide the main container's glass effect, keeping only buttons */
@media (max-width: 640px) {
    .glass-card {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .glass-card::after {
        display: none !important;
    }

    .link-btn {
        backdrop-filter: blur(8px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    }
}

/* ---- Chrome specific complex glass ---- */
html.is-chrome .glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px) saturate(120%) url(#refractive-glass);
    -webkit-backdrop-filter: blur(2px) saturate(120%) url(#refractive-glass);
}

html.is-chrome .glass-card::after {
    display: none;
}

html.is-chrome .link-btn {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px) saturate(120%) url(#refractive-glass);
    -webkit-backdrop-filter: blur(5px) saturate(120%) url(#refractive-glass);
}

@media (max-width: 640px) {
    html.is-chrome .link-btn {
        backdrop-filter: blur(5px) saturate(120%) url(#refractive-glass) !important;
        -webkit-backdrop-filter: blur(5px) saturate(120%) url(#refractive-glass) !important;
    }
}