<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3AM OPTiC.</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script type="module">
        import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
    </script>
    <!-- Developer Tools Blocker -->
    <script src="static/devtools-blocker.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            color: #fff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background: #000;
            position: relative;
            cursor: none;
        }

        .gradient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            z-index: -4;
            overflow: hidden;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.9) 100%
            );
            z-index: -1;
            mix-blend-mode: multiply;
        }

        /* Animated grid */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            opacity: 0.1;
        }

        .grid-bg::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: gridMove 20s linear infinite;
            transform: perspective(1000px) rotateX(60deg);
        }

        @keyframes gridMove {
            0% {
                transform: perspective(1000px) rotateX(60deg) translateY(0);
            }
            100% {
                transform: perspective(1000px) rotateX(60deg) translateY(50px);
            }
        }

        .ai-bubble {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.3),
                0 0 10px rgba(255, 255, 255, 0.1),
                inset 0 0 8px rgba(255, 255, 255, 0.06);
            animation: floatBubble 6s ease-in-out infinite;
        }

        @keyframes floatBubble {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-10px) rotate(5deg);
            }
            75% {
                transform: translateY(5px) rotate(-5deg);
            }
        }

        .ai-bubble:hover {
            transform: scale(1.1) rotate(180deg);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(255, 255, 255, 0.2),
                inset 0 0 12px rgba(255, 255, 255, 0.1);
        }

        .ai-bubble::before {
            content: 'AI';
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 2px;
            animation: rotateTxt 20s linear infinite;
        }

        @keyframes rotateTxt {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(-360deg);
            }
        }

        .ai-bubble::after {
            content: '';
            position: absolute;
            width: 120%;
            height: 120%;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: pulse 3s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.3);
                opacity: 0;
            }
        }


        .navbar {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            padding: 15px 25px;
            background: rgba(20, 20, 20, 0.5);
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 
                0 4px 30px rgba(0, 0, 0, 0.3),
                0 0 10px rgba(255, 255, 255, 0.2),
                inset 0 0 10px rgba(255, 255, 255, 0.05);
            animation: glowPulse 3s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0%, 100% {
                box-shadow: 
                    0 4px 30px rgba(0, 0, 0, 0.4),
                    0 0 8px rgba(255, 255, 255, 0.12),
                    inset 0 0 8px rgba(255, 255, 255, 0.04);
            }
            50% {
                box-shadow: 
                    0 4px 30px rgba(0, 0, 0, 0.4),
                    0 0 15px rgba(255, 255, 255, 0.18),
                    inset 0 0 12px rgba(255, 255, 255, 0.06);
            }
        }

        .navbar-brand {
            color: #fff;
            font-size: 1.4rem;
            font-weight: 600;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .navbar-links {
            display: flex;
            gap: 30px;
        }

        .navbar-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid transparent;
        }

        .navbar-links a:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .main-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            max-width: 1400px;
            width: 100%;
            padding: 20px;
        }

        .container {
            text-align: center;
            flex: 1;
            max-width: 600px;
        }

        .tagline {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 30px;
            font-weight: 400;
        }

        /* Profile Card Styles - Clean Black & White */
        .profile-card {
            width: 400px;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: none;
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(255, 255, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .profile-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        }

        .profile-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 24px;
            background: linear-gradient(45deg, 
                transparent 30%, 
                rgba(255, 255, 255, 0.1) 50%, 
                transparent 70%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .profile-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(255, 255, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.25);
        }

        .profile-card:hover::after {
            opacity: 1;
        }

        .profile-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #111 0%, #222 50%, #333 100%);
            border: 3px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.1),
                inset 0 0 15px rgba(255, 255, 255, 0.05);
        }

        .profile-avatar::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .profile-avatar:hover::before {
            opacity: 1;
        }

        #avatarImage {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .avatar-text {
            font-size: 2.5rem;
            font-weight: 800;
            color: white;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        }

        .profile-card:hover .profile-avatar {
            transform: scale(1.15) rotateY(-12deg) rotateZ(5deg);
            box-shadow: 
                0 15px 40px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(255, 255, 255, 0.15),
                inset 0 0 20px rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .profile-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: white;
        }

        .profile-role {
            color: #a1a1aa;
            font-size: 1rem;
            margin-bottom: 20px;
        }

        .profile-badges {
            display: flex;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            max-width: 100%;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }

        .profile-badges::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.05) 0%, 
                transparent 50%, 
                rgba(255, 255, 255, 0.05) 100%);
            border-radius: 16px;
            pointer-events: none;
        }

        .profile-badges:hover {
            border-color: rgba(255, 255, 255, 0.18);
            background: rgba(0, 0, 0, 0.6);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }

        .profile-badges:hover::before {
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                transparent 50%, 
                rgba(255, 255, 255, 0.1) 100%);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.8rem;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .badge:hover {
            transform: scale(1.1);
        }

        /* Original Discord Badge Styles */
        .discord-badge {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            border: none;
            flex-shrink: 0;
            z-index: 1;
        }

        .discord-badge:hover {
            transform: scale(1.1);
        }

        .discord-badge::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            background: #18191c;
            color: #ffffff;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease;
            z-index: 1000;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
        }

        .discord-badge:hover::after {
            opacity: 1;
        }

        /* Echte Discord Badge Images */
        .badge-hypesquad-events {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955073548353791/9171-hypesquad-events.png?ex=6857f2bf&is=6856a13f&hm=96df885444aefa16a89dd84c8a46d0c34f93dc9da49d07f0007083165df76529&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-nitro-24-months {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955073791627345/1837-evolving-badge-nitro-24-months.png?ex=6857f2bf&is=6856a13f&hm=c41f992728d5ffd631d7f179fea5a122c9d4eb9c22c8afa9b68dd91b1ba7a81d&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-completed-quest {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955074005667870/30647-completed-quest.png?ex=6857f2bf&is=6856a13f&hm=b7f29c1f418e1fa46644d18fb42f2995c452a6b748943f5c1b8eb9c44aeb5bbc&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-nitro-style-opal {
            background-image: url('https://cdn.discordapp.com/attachments/1285633144015556648/1385955164846030939/53164-nitro-style-opal.png?ex=6857f2d5&is=6856a155&hm=4157841fee8a003b9621d7fddd271407e44597abb98374eea87f5882e95bb7f1&');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-early-verified-bot-developer {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955210580463646/7088-early-verified-bot-developer.png?ex=6857f2e0&is=6856a160&hm=60f65ac5f27c13ac604f4bf3647bed27e561e414aa2284ae6738f902cc99ac34&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-moderator-programs-alumni {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955327068864522/4351-moderator-programs-alumni.png?ex=6857f2fb&is=6856a17b&hm=262db3c3de79c890a9087dccbf177ec638792b25efdc22fb327bc20923bfd9f1&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-active-developer {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955524746674217/7011-active-developer-badge.png?ex=6857f32a&is=6856a1aa&hm=06fb8bc7edda4bf2bbd888644b222d99553efb4489633b26042c57d2a56612bb&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-discord-gold-bug-hunter {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955548389969920/9148-discord-gold-bug-hunter.png?ex=6857f330&is=6856a1b0&hm=3b2a8192d2284d5c9f8fed0b67a015b5e240dedccc06b03f1ed1e4381777c912&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-early-supporter {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955605482700871/5053-early-supporter.png?ex=6857f33e&is=6856a1be&hm=6f2fb985d8e60d9abafb8ea5a5570bd37610bbef698ba5e3352b335c8ce93d71&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-partnered-server-owner {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955662235828314/5477-partnered-server-owner.png?ex=6857f34b&is=6856a1cb&hm=f12b6710ebb02326a161ddaa4e0b703628c8f2f3d85c6d13e1043f077e9c0533&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .badge-discord-staff {
            background-image: url('https://media.discordapp.net/attachments/1285633144015556648/1385955729751408650/39520-discordstaff.png?ex=6857f35b&is=6856a1db&hm=413999ed8b1bf468dd544a5609d49ba3c286beaac09d4f0e6961ef28a4f55d44&=&format=webp&quality=lossless');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .profile-info {
            margin-bottom: 25px;
        }

        .profile-description {
            color: #a1a1aa;
            font-size: 0.95rem;
            margin-bottom: 15px;
            text-align: center;
        }

        .profile-location {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #71717a;
            font-size: 0.9rem;
        }

        /* Activities Section */
        .activities-section {
            margin-bottom: 30px;
        }

        .activity-card {
            background: rgba(15, 15, 15, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: all 0.2s ease;
            position: relative;
        }

        .activity-card:hover {
            background: rgba(20, 20, 20, 0.9);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .activity-icon {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(30, 30, 30, 0.8);
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }

        .activity-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .activity-icon-large,
        .activity-icon-small {
            position: absolute;
            border-radius: 50%;
        }

        .activity-icon-large {
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }

        .activity-icon-small {
            width: 20px;
            height: 20px;
            bottom: -4px;
            right: -4px;
            border: 2px solid rgba(15, 15, 15, 0.8);
            background: rgba(30, 30, 30, 0.8);
        }

        .activity-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .activity-name {
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .activity-details {
            font-size: 12px;
            color: #b9bbbe;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .activity-state {
            font-size: 12px;
            color: #b9bbbe;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .activity-timestamp {
            font-size: 12px;
            color: #72767d;
            margin-top: 4px;
        }

        .activity-time {
            font-size: 11px;
            color: #b9bbbe;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            margin-top: 4px;
            text-align: left;
        }

        /* Spotify Activity */
        .activity-card.spotify {
            border-color: rgba(29, 185, 84, 0.4);
            background: rgba(29, 185, 84, 0.05);
        }

        .activity-card.spotify:hover {
            border-color: rgba(29, 185, 84, 0.6);
            background: rgba(29, 185, 84, 0.1);
        }

        .activity-card.spotify .activity-icon {
            background: linear-gradient(135deg, #1db954, #1ed760);
        }

        /* Gaming Activity */
        .activity-card.gaming {
            border-color: rgba(114, 137, 218, 0.4);
            background: rgba(114, 137, 218, 0.05);
        }

        .activity-card.gaming:hover {
            border-color: rgba(114, 137, 218, 0.6);
            background: rgba(114, 137, 218, 0.1);
        }

        /* VS Code Activity */
        .activity-card.vscode {
            border-color: rgba(0, 122, 204, 0.4);
            background: rgba(0, 122, 204, 0.05);
        }

        .activity-card.vscode:hover {
            border-color: rgba(0, 122, 204, 0.6);
            background: rgba(0, 122, 204, 0.1);
        }

        /* Custom Status */
        .activity-card.custom {
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* Spotify Progress Bar */
        .spotify-progress {
            width: 100%;
            height: 4px;
            background: rgba(60, 60, 60, 0.8);
            border-radius: 2px;
            margin-top: 8px;
            position: relative;
            transition: background 0.1s ease;
        }

        .spotify-progress-fill {
            height: 100%;
            background: #1db954;
            border-radius: 2px;
            transition: width 0.05s linear;
            position: relative;
        }

        .spotify-time {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            font-size: 11px;
            color: #b9bbbe;
            margin-top: 4px;
            text-align: center;
        }

        .activity-time.spotify-time {
            position: static;
            text-align: center;
            margin-top: 4px;
        }

        /* Discord Status Header */
        .status-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding: 8px 12px;
            background: rgba(15, 15, 15, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }

        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #23a55a;
            position: relative;
            flex-shrink: 0;
        }

        .status-dot.online {
            background: #23a55a;
        }

        .status-dot.idle {
            background: #f0b232;
        }

        .status-dot.dnd {
            background: #f23f43;
        }

        .status-dot.offline {
            background: #80848e;
        }

        .status-dot::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: inherit;
            animation: pulse-status 2s infinite;
        }

        @keyframes pulse-status {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.4);
                opacity: 0;
            }
        }

        .status-text {
            font-size: 14px;
            color: #ffffff;
            font-weight: 600;
        }


        /* Social Links */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .social-link {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 1.3rem;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .social-link::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 12px;
            padding: 2px;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: subtract;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: subtract;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .social-link:hover::before {
            opacity: 1;
        }

        .social-link.discord {
            background: linear-gradient(135deg, #111 0%, #222 50%, #333 100%);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.4),
                0 0 15px rgba(255, 255, 255, 0.1);
        }

        .social-link.discord:hover {
            background: linear-gradient(135deg, #222 0%, #333 50%, #444 100%);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 
                0 8px 25px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(255, 255, 255, 0.15);
        }

        .social-link:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .logo {
            font-size: 3.5rem;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 20px;
            text-shadow: 
                0 0 5px rgba(255, 255, 255, 0.1),
                0 0 10px rgba(255, 255, 255, 0.05),
                2px 2px 4px rgba(0, 0, 0, 0.5);
            color: #ffffff;
        }


        .tagline {
            font-size: 1.5rem;
            margin-bottom: 40px;
            opacity: 0.9;
        }

        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .btn {
            background: rgba(255, 255, 255, 0.9);
            color: #000000;
            padding: 15px 35px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.2),
                0 0 5px rgba(255, 255, 255, 0.1),
                inset 0 0 5px rgba(255, 255, 255, 0.1);
            animation: buttonBreath 4s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        @keyframes buttonBreath {
            0%, 100% {
                box-shadow: 
                    0 4px 15px rgba(0, 0, 0, 0.3),
                    0 0 4px rgba(255, 255, 255, 0.08),
                    inset 0 0 4px rgba(255, 255, 255, 0.08);
            }
            50% {
                box-shadow: 
                    0 4px 15px rgba(0, 0, 0, 0.3),
                    0 0 6px rgba(255, 255, 255, 0.12),
                    inset 0 0 6px rgba(255, 255, 255, 0.12);
            }
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
            opacity: 0;
        }

        .btn:hover::before {
            opacity: 1;
        }

        .btn:hover {
            background: #ffffff;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 
                0 6px 20px rgba(0, 0, 0, 0.3),
                0 0 10px rgba(255, 255, 255, 0.2),
                inset 0 0 10px rgba(255, 255, 255, 0.2);
        }

        .btn i {
            margin-right: 10px;
        }

        .social-links {
            margin-top: 40px;
        }

        .social-links a {
            color: #ffffff;
            font-size: 1.5rem;
            margin: 0 15px;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: #ffffff;
        }

        @media (max-width: 1200px) {
            .main-content {
                flex-direction: column;
                gap: 40px;
                align-items: center;
            }

            .profile-card {
                width: 350px;
            }
        }

        @media (max-width: 600px) {
            .navbar {
                width: 95%;
                padding: 12px 20px;
            }

            .navbar-brand {
                font-size: 1.2rem;
            }

            .navbar-links {
                gap: 15px;
            }

            .navbar-links a {
                font-size: 0.9rem;
                padding: 6px 12px;
            }

            .main-content {
                padding: 10px;
                gap: 30px;
            }

            .logo {
                font-size: 2rem;
            }

            .tagline {
                font-size: 1rem;
            }

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

            .profile-card {
                width: 100%;
                max-width: 320px;
                padding: 30px;
            }

            .profile-card:hover {
                transform: rotateY(4deg) rotateX(1deg) translateZ(10px);
            }

            .profile-avatar {
                width: 100px;
                height: 100px;
            }

            .avatar-text {
                font-size: 2rem;
            }

            .profile-name {
                font-size: 1.5rem;
            }

            .ai-bubble {
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
            }

            .ai-bubble::before {
                font-size: 1rem;
            }
        }

        .chat-container {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 380px;
            height: 600px;
            background: rgba(20, 20, 20, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            display: none;
            flex-direction: column;
            z-index: 999;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 15px rgba(255, 255, 255, 0.2),
                inset 0 0 10px rgba(255, 255, 255, 0.05);
            overflow: hidden;
            animation: chatGlow 4s ease-in-out infinite;
        }

        @keyframes chatGlow {
            0%, 100% {
                box-shadow: 
                    0 8px 32px rgba(0, 0, 0, 0.5),
                    0 0 12px rgba(255, 255, 255, 0.12),
                    inset 0 0 8px rgba(255, 255, 255, 0.04);
            }
            50% {
                box-shadow: 
                    0 8px 32px rgba(0, 0, 0, 0.5),
                    0 0 18px rgba(255, 255, 255, 0.18),
                    inset 0 0 12px rgba(255, 255, 255, 0.06);
            }
        }

        .chat-container.active {
            display: flex;
        }

        .chat-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .chat-header h3 {
            color: #fff;
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .close-chat {
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

        .close-chat:hover {
            color: #fff;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .message {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: #fff;
            flex-shrink: 0;
        }

        .message-content {
            background: rgba(255, 255, 255, 0.1);
            padding: 12px 16px;
            border-radius: 15px;
            color: #fff;
            max-width: 80%;
            line-height: 1.6;
            font-size: 0.95rem;
            font-weight: 400;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 
                0 0 10px rgba(255, 255, 255, 0.2),
                inset 0 0 8px rgba(255, 255, 255, 0.05);
        }

        .message.user .message-content {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .chat-input {
            padding: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            gap: 10px;
        }

        .chat-input textarea {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 12px;
            color: #fff;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.95rem;
            font-weight: 400;
            resize: none;
            height: 45px;
            line-height: 1.4;
            transition: all 0.3s ease;
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .chat-input textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        .chat-input textarea:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 
                0 0 25px rgba(255, 255, 255, 0.5),
                inset 0 0 15px rgba(255, 255, 255, 0.2);
        }

        .send-message {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-radius: 10px;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #fff;
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .send-message:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.6);
            box-shadow: 
                0 0 25px rgba(255, 255, 255, 0.6),
                inset 0 0 15px rgba(255, 255, 255, 0.2);
        }

        .send-message i {
            font-size: 1.2rem;
        }

        .message-content pre {
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }

        .message-content code {
            font-family: 'JetBrains Mono', 'Courier New', monospace;
            font-size: 0.9rem;
        }

        @media (max-width: 600px) {
            .chat-container {
                width: 90%;
                height: 80vh;
                bottom: 85px;
                right: 5%;
            }
        }


        /* Subtle noise overlay for texture */
        .noise-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            opacity: 0.02;
            pointer-events: none;
        }

        .noise-overlay::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px),
                repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px);
            animation: noiseShift 0.2s steps(5) infinite;
        }

        @keyframes noiseShift {
            0% { transform: translate(0, 0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0, 0); }
        }

        /* WRST.life style animated gradient background */
        .gradient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            z-index: -4;
            overflow: hidden;
        }

        /* Removed gradient orbs - no more white glow circles */

        /* Animated stars background */
        .stars-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -4;
            overflow: hidden;
        }

        .star {
            position: absolute;
            background: #ffffff;
            border-radius: 50%;
            animation: twinkle 4s ease-in-out infinite;
        }

        .star.small {
            width: 1px;
            height: 1px;
        }

        .star.medium {
            width: 2px;
            height: 2px;
        }

        .star.large {
            width: 3px;
            height: 3px;
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Optimized Custom Cursor */
        .custom-cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            will-change: transform;
            transform: translate(-50%, -50%);
        }

        .custom-cursor-trail {
            position: fixed;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            will-change: transform;
            transform: translate(-50%, -50%);
        }

        .custom-cursor.hover {
            transform: translate(-50%, -50%) scale(1.8);
            background: rgba(255, 255, 255, 0.7);
        }

        /* Optimized Mouse Trail Effect */
        .mouse-trail {
            position: fixed;
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9997;
            will-change: transform, opacity;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* Optimized Sparkle Effect */
        .sparkle {
            position: fixed;
            width: 2px;
            height: 2px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9996;
            will-change: transform, opacity;
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        /* Magnetic Effect for Interactive Elements */
        .magnetic {
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Clean Glow Effect on Hover */
        .profile-card::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: linear-gradient(45deg, 
                transparent, 
                rgba(255, 255, 255, 0.08), 
                transparent, 
                rgba(255, 255, 255, 0.08), 
                transparent);
            border-radius: 21px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .profile-card:hover::before {
            opacity: 1;
            animation: borderGlow 3s linear infinite;
        }

        @keyframes borderGlow {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 200% 50%;
            }
        }


    </style>
</head>
<body>
    <div class="gradient-bg"></div>
    <div class="stars-container" id="starsContainer"></div>
    <div class="grid-overlay"></div>
    <div class="particle-overlay" id="particleOverlay"></div>
    <div class="noise-overlay"></div>
    <nav class="navbar">
        <a href="#" class="navbar-brand">3AM OPTiC.</a>
        <div class="navbar-links">
            <a href="#"><i class="fas fa-home"></i> Home</a>
            <a href="#"><i class="fas fa-info-circle"></i> About</a>
            <a href="paid-models.html"><i class="fas fa-crown"></i> Paid Models</a>
            <a href="free-mods.html"><i class="fas fa-gift"></i> Free Mods</a>
            <a href="#"><i class="fas fa-briefcase"></i> Works</a>
            <a href="#"><i class="fas fa-star"></i> Reviews</a>
            <a href="https://discord.gg/3am-optic"><i class="fas fa-users"></i> Discord</a>
        </div>
    </nav>
    <div class="main-content">
        <div class="container">
            <h1 class="logo">3AM OPTiC.</h1>
            <p class="tagline">We are 3AM OPTiC. , a team creating GTA 5 mods for Rage MP and FiveM. We host manygiveaways and offer amazing booster packs along with free content. Additionally, we sell high-quality, self-made paid mods and exclusive private mods.</p>
            <a href="https://discord.gg/3am-optic" class="btn magnetic"><i class="fas fa-users"></i> Join our discord</a>
        </div>
        
        <!-- Profile Card -->
        <div class="profile-card magnetic" id="profileCard">
            <div class="profile-header">
                <div class="profile-avatar" id="discordAvatar">
                    <img id="avatarImage" src="" alt="Discord Avatar" style="display: none;">
                    <span class="avatar-text" id="avatarFallback">3AM</span>
                </div>
                <h2 class="profile-name" id="discordUsername">М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍</h2>
                <p class="profile-role" id="discordDiscriminator"></p>
                <div class="profile-badges" id="discordBadges">
                    <!-- Discord Badges werden hier dynamisch eingefügt -->
                </div>
            </div>
            
            <div class="profile-info">
                <p class="profile-description" id="discordBio"></p>
                <div class="profile-location">
                    <i class="fab fa-discord"></i>
                    <span id="discordId">743367299192586300</span>
                </div>
            </div>
            
            <div class="activities-section" id="activitiesSection">
                <!-- Aktivitäten werden hier dynamisch eingefügt -->
            </div>
            
            <div class="social-links">
                <a href="https://discord.gg/3am-optic" class="social-link discord" title="Discord Server">
                    <i class="fab fa-discord"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="ai-bubble magnetic" onclick="toggleChat()"></div>
    
    <!-- Custom Cursor Elements -->
    <div class="custom-cursor" id="customCursor"></div>
    <div class="custom-cursor-trail" id="customCursorTrail"></div>
    <div class="chat-container">
        <div class="chat-header">
            <h3>3AM OPTiC. AI Chat</h3>
            <span class="close-chat" onclick="closeChat()">&times;</span>
        </div>
        <div class="chat-messages">
            <!-- Chat messages will be dynamically added here -->
        </div>
        <div class="chat-input">
            <textarea placeholder="Type your message..." rows="1"></textarea>
            <button class="send-message"><i class="fas fa-paper-plane"></i></button>
        </div>
    </div>

    <script>
        // Create subtle floating particles
        function createFloatingParticles() {
            const particleOverlay = document.getElementById('particleOverlay');
            if (!particleOverlay) return;
            
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 10 + 's';
                particle.style.animationDuration = (Math.random() * 5 + 10) + 's';
                particleOverlay.appendChild(particle);
            }
        }
        
        window.addEventListener('load', createFloatingParticles);
        
        // Create animated stars
        function createStars() {
            const starsContainer = document.getElementById('starsContainer');
            if (!starsContainer) return;
            
            // Create twinkling stars
            for (let i = 0; i < 150; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // Random size
                const size = Math.random();
                if (size < 0.5) star.classList.add('small');
                else if (size < 0.8) star.classList.add('medium');
                else star.classList.add('large');
                
                // Random position
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                
                // Random animation delay
                star.style.animationDelay = Math.random() * 4 + 's';
                
                starsContainer.appendChild(star);
            }
            

        }
        

        window.addEventListener('load', createStars);

        // Optimized Custom Cursor System
        let customCursor, customCursorTrail;
        let mouseX = 0, mouseY = 0;
        let trailX = 0, trailY = 0;
        let isMoving = false;
        let moveTimeout;

        function initCustomCursor() {
            customCursor = document.getElementById('customCursor');
            customCursorTrail = document.getElementById('customCursorTrail');

            if (!customCursor || !customCursorTrail) return;

            // Optimized mouse move event with throttling
            let ticking = false;
            
            document.addEventListener('mousemove', (e) => {
                mouseX = e.pageX; // Verwende pageX statt clientX für korrekte Position
                mouseY = e.pageY; // Verwende pageY statt clientY für korrekte Position
                isMoving = true;

                if (!ticking) {
                    requestAnimationFrame(() => {
                        // Update main cursor position - fixed positioning
                        customCursor.style.left = mouseX + 'px';
                        customCursor.style.top = mouseY + 'px';
                        customCursor.style.transform = 'translate(-50%, -50%)';
                        
                        // Reduced trail creation frequency
                        if (Math.random() < 0.3) { // 30% chance instead of 100%
                            createMouseTrail(mouseX, mouseY);
                        }
                        
                        ticking = false;
                    });
                    ticking = true;
                }

                // Clear move timeout
                clearTimeout(moveTimeout);
                moveTimeout = setTimeout(() => {
                    isMoving = false;
                }, 100);
            });

            // Optimized smooth trail animation
            function animateTrail() {
                if (isMoving) {
                    trailX += (mouseX - trailX) * 0.08; // Slightly slower for smoother effect
                    trailY += (mouseY - trailY) * 0.08;
                } else {
                    trailX += (mouseX - trailX) * 0.05; // Even slower when not moving
                    trailY += (mouseY - trailY) * 0.05;
                }

                customCursorTrail.style.left = trailX + 'px';
                customCursorTrail.style.top = trailY + 'px';
                customCursorTrail.style.transform = 'translate(-50%, -50%)';
                requestAnimationFrame(animateTrail);
            }
            animateTrail();

            // Optimized hover effects
            const interactiveElements = document.querySelectorAll('a, button, .btn, .social-link, .ai-bubble, .discord-badge, .activity-card');
            
            interactiveElements.forEach(element => {
                element.addEventListener('mouseenter', () => {
                    customCursor.classList.add('hover');
                });

                element.addEventListener('mouseleave', () => {
                    customCursor.classList.remove('hover');
                });
            });

            // Optimized magnetic effect with debouncing
            const magneticElements = document.querySelectorAll('.magnetic');
            
            magneticElements.forEach(element => {
                let magneticTicking = false;
                
                element.addEventListener('mousemove', (e) => {
                    if (!magneticTicking) {
                        requestAnimationFrame(() => {
                            const rect = element.getBoundingClientRect();
                            const x = e.pageX - rect.left - rect.width / 2;
                            const y = e.pageY - rect.top - rect.height / 2;
                            
                            const moveX = x * 0.1; // Reduced intensity
                            const moveY = y * 0.1;
                            
                            element.style.transform = `translate(${moveX}px, ${moveY}px)`;
                            magneticTicking = false;
                        });
                        magneticTicking = true;
                    }
                });

                element.addEventListener('mouseleave', () => {
                    element.style.transform = 'translate(0px, 0px)';
                });
            });
        }

        // Optimized trail and sparkle creation
        let trailPool = [];
        let sparklePool = [];
        const MAX_TRAILS = 10;
        const MAX_SPARKLES = 5;

        function createMouseTrail(x, y) {
            // Use object pooling for better performance
            let trail = trailPool.pop();
            if (!trail) {
                trail = document.createElement('div');
                trail.className = 'mouse-trail';
                document.body.appendChild(trail);
            }
            
            trail.style.left = (x - 2) + 'px';
            trail.style.top = (y - 2) + 'px';
            trail.style.opacity = '1';
            trail.style.display = 'block';
            
            // Randomly create sparkles (reduced frequency)
            if (Math.random() < 0.05) { // 5% chance instead of 10%
                createSparkle(x, y);
            }
            
            // Return to pool after animation
            setTimeout(() => {
                trail.style.opacity = '0';
                setTimeout(() => {
                    trail.style.display = 'none';
                    if (trailPool.length < MAX_TRAILS) {
                        trailPool.push(trail);
                    } else {
                        trail.remove();
                    }
                }, 100);
            }, 800);
        }

        function createSparkle(x, y) {
            // Use object pooling for sparkles too
            let sparkle = sparklePool.pop();
            if (!sparkle) {
                sparkle = document.createElement('div');
                sparkle.className = 'sparkle';
                document.body.appendChild(sparkle);
            }
            
            // Random offset for sparkle position
            const offsetX = (Math.random() - 0.5) * 20; // Reduced range
            const offsetY = (Math.random() - 0.5) * 20;
            
            sparkle.style.left = (x + offsetX) + 'px';
            sparkle.style.top = (y + offsetY) + 'px';
            sparkle.style.opacity = '1';
            sparkle.style.display = 'block';
            
            // Return to pool after animation
            setTimeout(() => {
                sparkle.style.opacity = '0';
                setTimeout(() => {
                    sparkle.style.display = 'none';
                    if (sparklePool.length < MAX_SPARKLES) {
                        sparklePool.push(sparkle);
                    } else {
                        sparkle.remove();
                    }
                }, 100);
            }, 600);
        }

        // Initialize cursor on load
        window.addEventListener('load', initCustomCursor);
        
        // Initialize everything on page load
        window.addEventListener('load', function() {
            console.log('🚀 Page loaded - starting Discord profile and live updates...');
            loadDiscordProfile();
            startTimestampUpdates();
        });
        
        // Globale Funktionen definieren
        let chatContainer, chatMessages, textarea, sendButton, aiButton, isProcessing = false;
        let ws = null;

        function connectWebSocket() {
            if (ws !== null) {
                return;
            }

            // WebSocket-Verbindung
            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsHost = window.location.hostname === 'localhost' 
                ? 'localhost:8000' 
                : 'api.3am-optic.com'; // Update this with your API subdomain
            ws = new WebSocket(`${wsProtocol}//${wsHost}/ws/${Date.now()}`);

            console.log('Attempting to connect to:', `${wsProtocol}//${wsHost}/ws/${Date.now()}`);

            ws.onopen = function() {
                console.log('WebSocket Connected');
                addMessage("Verbindung hergestellt! Ich bin bereit für unsere Unterhaltung.", false);
            };

            ws.onmessage = function(event) {
                try {
                    console.log('Received message:', event.data);
                    const response = JSON.parse(event.data);
                    addMessage(response.content, false);
                    isProcessing = false;
                } catch (error) {
                    console.error('Error parsing message:', error);
                    addMessage("Es gab einen Fehler bei der Verarbeitung der Antwort.", false);
                }
            };

            ws.onclose = function(event) {
                console.log('WebSocket Closed. Code:', event.code, 'Reason:', event.reason);
                ws = null;
                addMessage("Verbindung zum Server verloren. Versuche automatisch neu zu verbinden...", false);
                setTimeout(connectWebSocket, 5000);
            };

            ws.onerror = function(error) {
                console.error('WebSocket Error:', error);
                addMessage("Verbindungsfehler. Überprüfe die Serververbindung...", false);
            };
        }

        function toggleChat() {
            if (!chatContainer) return;
            chatContainer.classList.toggle('active');
            if (chatContainer.classList.contains('active')) {
                textarea.focus();
                if (!ws) {
                    connectWebSocket();
                }
            }
        }

        function closeChat() {
            if (!chatContainer) return;
            chatContainer.classList.remove('active');
        }

        function addMessage(content, isUser = false) {
            if (!chatMessages) return;
            const message = document.createElement('div');
            message.className = `message ${isUser ? 'user' : ''}`;
            
            const avatar = document.createElement('div');
            avatar.className = 'message-avatar';
            avatar.textContent = isUser ? 'You' : 'AI';

            const messageContent = document.createElement('div');
            messageContent.className = 'message-content';
            messageContent.innerHTML = isUser ? content : marked.parse(content);

            if (isUser) {
                message.appendChild(messageContent);
                message.appendChild(avatar);
            } else {
                message.appendChild(avatar);
                message.appendChild(messageContent);
            }

            chatMessages.appendChild(message);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        async function sendMessage() {
            if (isProcessing || !textarea || !textarea.value.trim()) return;

            if (!ws || ws.readyState !== WebSocket.OPEN) {
                console.log('WebSocket not connected. State:', ws ? ws.readyState : 'null');
                addMessage("Keine aktive Verbindung. Versuche neu zu verbinden...", false);
                connectWebSocket();
                return;
            }

            const userMessage = textarea.value.trim();
            textarea.value = '';
            addMessage(userMessage, true);

            isProcessing = true;
            
            try {
                console.log('Sending message:', userMessage);
                ws.send(JSON.stringify({
                    message: userMessage
                }));
            } catch (error) {
                console.error('Error sending message:', error);
                addMessage("Fehler beim Senden. Versuche es erneut...", false);
                isProcessing = false;
            }
        }

        // FIXED Discord Profile Functions
        async function loadDiscordProfile() {
            const discordId = '743367299192586300';
            
            console.log('🔄 Loading Discord profile for:', discordId);
            
            try {
                // Method 1: Lanyard API
                console.log('1️⃣ Trying Lanyard API...');
                try {
                    const lanyardSuccess = await loadLanyardData(discordId);
                    if (lanyardSuccess) {
                        console.log('✅ Lanyard API successful!');
                        return;
                    }
                } catch (lanyardError) {
                    console.log('❌ Lanyard API failed:', lanyardError.message);
                }
                
                // Method 2: Discord Lookup API
                console.log('2️⃣ Trying Discord Lookup API...');
                try {
                    const lookupSuccess = await loadDiscordLookupData(discordId);
                    if (lookupSuccess) {
                        console.log('✅ Discord Lookup successful!');
                        return;
                    }
                } catch (lookupError) {
                    console.log('❌ Discord Lookup failed:', lookupError.message);
                }
                
                // Method 3: Direct Discord CDN
                console.log('3️⃣ Trying Direct Discord CDN...');
                try {
                    await loadDirectDiscordData(discordId);
                    console.log('✅ Direct Discord CDN successful!');
                    return;
                } catch (directError) {
                    console.log('❌ Direct Discord CDN failed:', directError.message);
                }
                
                // Fallback
                console.log('⚠️ All Discord APIs failed, using enhanced fallback...');
                showFallbackProfile(discordId);
                
            } catch (error) {
                console.error('💥 Complete Discord loading failed:', error);
                showFallbackProfile(discordId);
            }
        }

        // Verbesserte Discord-Daten laden
        async function trySimpleDiscordLoad(userId) {
            try {
                console.log('=== Trying Multiple Discord APIs ===');
                
                // Method 1: Lanyard API
                console.log('1. Trying Lanyard API...');
                try {
                    const response = await fetch(`https://api.lanyard.rest/v1/users/${userId}`, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    
                    const data = await response.json();
                    console.log('Lanyard response:', data);
                    
                    if (data.success && data.data) {
                        console.log('✅ Lanyard API successful!');
                        const user = data.data.discord_user;
                        const profileData = {
                            id: user.id,
                            username: user.username || user.global_name || 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍',
                            discriminator: user.discriminator !== '0' ? user.discriminator : '',
                            avatar: user.avatar,
                            avatar_decoration: user.avatar_decoration_data || user.avatar_decoration,
                            status: data.data.discord_status || 'online',
                            activities: data.data.activities || [],
                            spotify: data.data.spotify,
                            listening_to_spotify: data.data.listening_to_spotify || false
                        };
                        
                        updateProfileDisplay(profileData);
                        updateBadgesDisplay(data.data);
                        updateActivitiesDisplay(data.data);
                        
                        // Start Live WebSocket Updates
                        connectLanyardWebSocket();
                        return true;
                    } else if (data.error && data.error.code === 'user_not_monitored') {
                        console.log('⚠️ User not monitored by Lanyard - need to join Lanyard Discord server');
                        console.log('🔗 Join here: https://discord.gg/lanyard');
                    }
                } catch (lanyardError) {
                    console.log('❌ Lanyard API failed:', lanyardError.message);
                }
                
                // Method 2: Discord Lookup API
                console.log('2. Trying Discord Lookup API...');
                try {
                    const lookupResponse = await fetch(`https://discordlookup.mesalytic.moe/v1/user/${userId}`);
                    if (lookupResponse.ok) {
                        const lookupData = await lookupResponse.json();
                        console.log('✅ Discord Lookup successful:', lookupData);
                        
                        if (lookupData && lookupData.id) {
                            const profileData = {
                                id: lookupData.id,
                                username: lookupData.username || 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍',
                                discriminator: lookupData.discriminator !== '0' ? lookupData.discriminator : '',
                                avatar: lookupData.avatar,
                                status: 'online',
                                activities: [],
                                spotify: null,
                                listening_to_spotify: false
                            };
                            
                                                    updateProfileDisplay(profileData);
                        updateBadgesDisplay({ discord_user: { id: profileData.id, avatar: profileData.avatar }, activities: [] });
                        updateActivitiesDisplay({ discord_status: profileData.status, activities: profileData.activities || [], listening_to_spotify: false, spotify: null });
                        return true;
                        }
                    }
                } catch (lookupError) {
                    console.log('❌ Discord Lookup failed:', lookupError.message);
                }
                
                // Method 3: Alternative APIs
                console.log('3. Trying alternative APIs...');
                try {
                    const altResponse = await fetch(`https://discordapi.com/v1/user/${userId}`);
                    if (altResponse.ok) {
                        const altData = await altResponse.json();
                        console.log('✅ Alternative API successful:', altData);
                        // Process alternative API data...
                    }
                } catch (altError) {
                    console.log('❌ Alternative APIs failed:', altError.message);
                }
                
                console.log('⚠️ All Discord APIs failed, using fallback');
                return false;
                
            } catch (error) {
                console.log('❌ Complete Discord loading failed:', error);
                return false;
            }
        }

        // Funktionierende Fallback-Daten
        function loadWorkingFallback(userId) {
            console.log('Loading fallback profile...');
            
            const fallbackData = {
                id: userId,
                username: 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍',
                discriminator: '',
                avatar: null, // Wird versucht zu laden
                status: 'online',
                activities: [
                    {
                        name: 'Discord',
                        details: '3AM OPTiC Elite Member',
                        state: 'Active in Community',
                        type: 0
                    }
                ],
                spotify: null,
                listening_to_spotify: false
            };
            
            // Verwende zentrale Fallback-Funktion
            showFallbackProfile(userId);
        }

        // Verbessertes Avatar-Loading mit echten Discord-Daten
        async function tryLoadAvatar(userId) {
            console.log('=== Avatar Discovery Mode ===');
            console.log('Searching for avatar for user:', userId);
            
            const avatarImg = document.getElementById('avatarImage');
            const avatarFallback = document.getElementById('avatarFallback');
            
            if (!avatarImg || !avatarFallback) return;
            
            // Versuche alternative Discord-APIs für Avatar-Discovery
            try {
                // Method 1: Discord Lookup API
                console.log('Trying Discord Lookup API...');
                const lookupResponse = await fetch(`https://discordlookup.mesalytic.moe/v1/user/${userId}`);
                if (lookupResponse.ok) {
                    const lookupData = await lookupResponse.json();
                    console.log('Discord Lookup data:', lookupData);
                    
                    if (lookupData.avatar) {
                        const avatarUrl = `https://cdn.discordapp.com/avatars/${userId}/${lookupData.avatar}.webp?size=256`;
                        console.log('Found avatar via lookup:', avatarUrl);
                        
                        const success = await testAvatarUrl(avatarUrl);
                        if (success) return;
                    }
                }
            } catch (e) {
                console.log('Discord Lookup failed:', e.message);
            }
            
            // Method 2: Versuche bekannte Avatar-Pattern
            console.log('Trying common avatar patterns...');
            const commonHashes = [
                // Häufige Discord Avatar Hashes (animiert)
                'a_f7c7f8f8f8f8f8f8f8f8f8f8f8f8f8f8',
                'a_1234567890abcdef1234567890abcdef',
                // Häufige Discord Avatar Hashes (statisch)  
                'f7c7f8f8f8f8f8f8f8f8f8f8f8f8f8f8',
                '1234567890abcdef1234567890abcdef',
                '0123456789abcdef0123456789abcdef'
            ];
            
            for (const hash of commonHashes) {
                const formats = hash.startsWith('a_') ? ['gif', 'webp'] : ['webp', 'png'];
                
                for (const format of formats) {
                    const url = `https://cdn.discordapp.com/avatars/${userId}/${hash}.${format}?size=256`;
                    console.log('Testing avatar URL:', url);
                    
                    const success = await testAvatarUrl(url);
                    if (success) return;
                }
            }
            
            // Method 3: Default Discord Avatar (falls User keinen Custom Avatar hat)
            console.log('Trying default Discord avatars...');
            const defaultAvatars = [0, 1, 2, 3, 4, 5];
            const discriminator = parseInt(userId) % 5; // Berechne default avatar basierend auf ID
            
            for (const avatarIndex of [discriminator, ...defaultAvatars]) {
                const defaultUrl = `https://cdn.discordapp.com/embed/avatars/${avatarIndex}.png`;
                console.log('Testing default avatar:', defaultUrl);
                
                const success = await testAvatarUrl(defaultUrl);
                if (success) return;
            }
            
            console.log('❌ No avatar found, using fallback text');
            showAvatarFallback();
        }
        
        // Hilfsfunktion zum Testen von Avatar-URLs
        async function testAvatarUrl(url) {
            try {
                const response = await fetch(url, { method: 'HEAD' });
                if (response.ok) {
                    console.log('✅ Avatar found:', url);
                    
                    const avatarImg = document.getElementById('avatarImage');
                    avatarImg.src = url;
                    avatarImg.style.display = 'block';
                    document.getElementById('avatarFallback').style.display = 'none';
                    
                    return true;
                }
            } catch (e) {
                // Ignore errors, continue testing
            }
            return false;
        }

        // Lanyard API für echte Discord-Daten
        // Backup Discord Lookup API
        async function loadDiscordLookupData(userId) {
            console.log('🔍 Trying Discord Lookup API...');
            
            try {
                const response = await fetch(`https://discordlookup.mesalytic.moe/v1/user/${userId}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'User-Agent': '3AM-OPTiC-Website/1.0'
                    }
                });
                
                console.log('📡 Discord Lookup Response Status:', response.status);
                
                if (!response.ok) {
                    throw new Error(`Discord Lookup API returned ${response.status}`);
                }
                
                const data = await response.json();
                console.log('📥 Discord Lookup Data:', data);
                
                if (data && data.id) {
                    console.log('✅ Valid Discord Lookup data received!');
                    
                    const profileData = {
                        id: data.id,
                        username: data.username || 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍',
                        discriminator: data.discriminator !== '0' ? data.discriminator : '',
                        avatar: data.avatar,
                        banner: data.banner,
                        status: 'online',
                        activities: [],
                        spotify: null,
                        listening_to_spotify: false
                    };
                    
                    // Update displays
                    updateProfileDisplay(profileData);
                    updateBadgesDisplay({ 
                        discord_user: { id: profileData.id, avatar: profileData.avatar },
                        activities: [] 
                    });
                    updateActivitiesDisplay({ 
                        discord_status: profileData.status,
                        activities: [],
                        listening_to_spotify: false,
                        spotify: null
                    });
                    
                    return true;
                }
                
                throw new Error('Invalid Discord Lookup response');
                
            } catch (error) {
                console.error('❌ Discord Lookup API Error:', error);
                throw error;
            }
        }

        // Direkter Discord CDN Zugriff
        async function loadDirectDiscordData(userId) {
            console.log('🔍 Versuche direkten Discord CDN-Zugriff...');
            
            // Teste verschiedene Avatar-Hashes
            const commonAvatarHashes = [
                'a_' + 'f'.repeat(30), // Animiert
                'f'.repeat(32), // Standard
                '0'.repeat(32), // Default
            ];
            
            for (const hash of commonAvatarHashes) {
                try {
                    const avatarUrl = `https://cdn.discordapp.com/avatars/${userId}/${hash}.webp?size=256`;
                    const response = await fetch(avatarUrl, { method: 'HEAD' });
                    
                    if (response.ok) {
                        console.log('✅ Avatar gefunden:', avatarUrl);
                        const profileData = {
                            id: userId,
                            username: 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍',
                            discriminator: '',
                            avatar: hash,
                            status: 'online',
                            activities: [],
                            spotify: null,
                            listening_to_spotify: false
                        };
                        
                        updateProfileCard(profileData);
                        return profileData;
                    }
                } catch (e) {
                    continue;
                }
            }
            
            console.log('❌ Direkter Zugriff fehlgeschlagen, verwende Fallback');
            loadEnhancedFallback(userId);
        }

        async function loadLanyardData(userId) {
            console.log('🔍 Loading Lanyard data for:', userId);
            
            try {
                const response = await fetch(`https://api.lanyard.rest/v1/users/${userId}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'User-Agent': '3AM-OPTiC-Website/1.0'
                    }
                });
                
                console.log('📡 Lanyard Response Status:', response.status);
                
                if (!response.ok) {
                    throw new Error(`Lanyard API returned ${response.status}: ${response.statusText}`);
                }
                
                const data = await response.json();
                console.log('📥 Lanyard Raw Data:', data);
                
                if (data.success && data.data && data.data.discord_user) {
                    const discordData = data.data;
                    const user = discordData.discord_user;
                    
                    console.log('✅ Valid Lanyard data received!');
                    console.log('User:', user.username || user.global_name);
                    console.log('Status:', discordData.discord_status);
                    console.log('Activities:', discordData.activities?.length || 0);
                    console.log('Spotify:', discordData.listening_to_spotify ? 'Yes' : 'No');
                    
                    const profileData = {
                        id: user.id,
                        username: user.username || user.global_name || 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍',
                        display_name: user.display_name,
                        discriminator: user.discriminator !== '0' ? user.discriminator : '',
                        avatar: user.avatar,
                        avatar_decoration: user.avatar_decoration_data,
                        banner: user.banner,
                        status: discordData.discord_status || 'online',
                        activities: discordData.activities || [],
                        spotify: discordData.spotify,
                        listening_to_spotify: discordData.listening_to_spotify || false
                    };
                    
                    // Update all displays
                    updateProfileDisplay(profileData);
                    updateBadgesDisplay(discordData);
                    updateActivitiesDisplay(discordData);
                    
                    // Avatar decoration
                    if (profileData.avatar_decoration) {
                        applyAvatarDecoration(profileData.avatar_decoration);
                    }
                    
                    return true;
                } else {
                    const errorMsg = data.error ? 
                        `${data.error.message} (Code: ${data.error.code})` : 
                        'Invalid response structure';
                    
                    console.log('⚠️ Lanyard Error:', errorMsg);
                    
                    if (data.error && data.error.code === 'user_not_monitored') {
                        console.log('📋 User not monitored by Lanyard');
                        console.log('🔗 To enable: Join https://discord.gg/lanyard and run /add command');
                    }
                    
                    throw new Error(errorMsg);
                }
                
            } catch (error) {
                console.error('❌ Lanyard API Error:', error);
                throw error;
            }
        }

        // Alternative: Discord Widget API
        async function loadRealDiscordData(userId) {
            try {
                // Versuche Discord Widget API (funktioniert nur wenn User auf einem Server mit Widget ist)
                const guildId = 'DEINE_SERVER_ID'; // Muss durch echte Server-ID ersetzt werden
                const response = await fetch(`https://discord.com/api/guilds/${guildId}/widget.json`);
                const data = await response.json();
                
                const member = data.members?.find(m => m.id === userId);
                if (member) {
                    updateProfileCard({
                        username: member.username,
                        discriminator: member.discriminator,
                        avatar: member.avatar,
                        status: member.status,
                        game: member.game
                    });
                }
            } catch (error) {
                throw error; // Weiter zu Lanyard API
            }
        }

        // Verbesserte Fallback-Funktion mit Avatar-Suche
        function loadEnhancedFallback(userId) {
            console.log('🔄 Lade erweiterte Fallback-Daten...');
            
            // Versuche verschiedene bekannte Avatar-Kombinationen
            const tryLoadAvatar = async () => {
                const testUrls = [
                    `https://cdn.discordapp.com/avatars/${userId}/a_f7c7f8f8f8f8f8f8f8f8f8f8f8f8f8f8.gif`,
                    `https://cdn.discordapp.com/avatars/${userId}/f7c7f8f8f8f8f8f8f8f8f8f8f8f8f8f8.webp`,
                    `https://cdn.discordapp.com/avatars/${userId}/a_${Math.random().toString(36).substring(2, 34)}.gif`,
                ];
                
                for (const url of testUrls) {
                    try {
                        const img = new Image();
                        img.crossOrigin = 'anonymous';
                        img.src = url;
                        
                        await new Promise((resolve, reject) => {
                            img.onload = resolve;
                            img.onerror = reject;
                            setTimeout(reject, 2000); // 2s timeout
                        });
                        
                        // Avatar gefunden!
                        const avatarHash = url.split('/').pop().split('.')[0];
                        console.log('✅ Avatar Hash gefunden:', avatarHash);
                        
                        const profileData = {
                            id: userId,
                            username: "М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍",
                            discriminator: "",
                            avatar: avatarHash,
                            status: "online",
                            activities: [
                                {
                                    name: "Discord",
                                    details: "3AM OPTiC Member",
                                    state: "Online",
                                    type: 0
                                }
                            ]
                        };
                        
                        updateProfileDisplay(profileData);
                        updateBadgesDisplay({ 
                            discord_user: { id: profileData.id, avatar: profileData.avatar },
                            activities: profileData.activities 
                        });
                        updateActivitiesDisplay({ 
                            discord_status: profileData.status,
                            activities: profileData.activities,
                            listening_to_spotify: false,
                            spotify: null
                        });
                        return;
                        
                    } catch (e) {
                        continue;
                    }
                }
                
                // Wenn kein Avatar gefunden wurde, verwende Default
                console.log('❌ No avatar found, using default profile');
                showFallbackProfile(userId);
            };
            
            tryLoadAvatar();
        }

        // Live-Updates Manager
        function startLiveUpdates(userId) {
            // Verschiedene Update-Intervalle
            const intervals = [];
            
            // Schnelle Updates für Status (alle 5 Sekunden)
            intervals.push(setInterval(async () => {
                try {
                    await loadLanyardData(userId);
                } catch (e) {
                    // Silent fail für Live-Updates
                }
            }, 5000));
            
            // Langsamere Updates für Profil-Daten (alle 30 Sekunden) 
            intervals.push(setInterval(async () => {
                try {
                    await loadDiscordLookupData(userId);
                } catch (e) {
                    // Silent fail
                }
            }, 30000));
            
            // Speichere Intervals für cleanup
            window.discordUpdateIntervals = intervals;
        }

        // Verbesserte Profile-Update-Funktion
        function updateProfileDisplay(data) {
            console.log('=== Updating Profile Display ===');
            console.log('Profile data received:', data);
            
            // Username
            const usernameEl = document.getElementById('discordUsername');
            if (usernameEl) {
                usernameEl.textContent = data.username || 'М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍';
                console.log('Username set to:', usernameEl.textContent);
            }
            
            // Discriminator (falls vorhanden)
            const discriminatorEl = document.getElementById('discordDiscriminator');
            if (discriminatorEl) {
                discriminatorEl.textContent = data.discriminator ? `#${data.discriminator}` : '';
            }
            
            // Avatar mit Dekoration
            if (data.avatar && data.id) {
                console.log('Loading avatar for user:', data.id, 'Avatar hash:', data.avatar);
                
                // Bestimme Avatar-Format (animiert oder statisch)
                const isAnimated = data.avatar.startsWith('a_');
                const extension = isAnimated ? 'gif' : 'webp';
                const avatarUrl = `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.${extension}?size=256`;
                
                console.log('Avatar URL:', avatarUrl);
                loadAvatarImage(avatarUrl, data.avatar_decoration);
            } else {
                console.log('No avatar data, showing fallback');
                showAvatarFallback();
            }
        }
        
        function loadAvatarImage(url, decorationData) {
            const avatarImg = document.getElementById('avatarImage');
            const avatarFallback = document.getElementById('avatarFallback');
            
            if (!avatarImg || !avatarFallback) return;
            
            console.log('Attempting to load avatar:', url);
            
            avatarImg.onload = function() {
                console.log('✅ Avatar loaded successfully!');
                avatarImg.style.display = 'block';
                avatarFallback.style.display = 'none';
                
                // Avatar-Dekoration anwenden wenn vorhanden
                if (decorationData) {
                    console.log('Applying avatar decoration:', decorationData);
                    applyAvatarDecoration(decorationData);
                } else {
                    console.log('No avatar decoration data');
                }
            };
            
            avatarImg.onerror = function() {
                console.log('❌ Avatar failed to load, trying alternatives...');
                
                // Versuche verschiedene Formate
                const alternatives = [
                    url.replace('.gif', '.webp').replace('.png', '.webp'),
                    url.replace('.webp', '.png').replace('.gif', '.png'),
                    url.replace(/\.(gif|webp|png)/, '.jpg')
                ];
                
                let currentTry = 0;
                
                function tryNext() {
                    if (currentTry < alternatives.length) {
                        const altUrl = alternatives[currentTry];
                        console.log(`Trying alternative ${currentTry + 1}:`, altUrl);
                        
                        avatarImg.onerror = function() {
                            currentTry++;
                            tryNext();
                        };
                        
                        avatarImg.src = altUrl;
                    } else {
                        console.log('❌ All avatar formats failed, showing fallback');
                        showAvatarFallback();
                    }
                }
                
                tryNext();
            };
            
            avatarImg.src = url;
        }
        
        function showAvatarFallback() {
            const avatarImg = document.getElementById('avatarImage');
            const avatarFallback = document.getElementById('avatarFallback');
            
            if (avatarImg) avatarImg.style.display = 'none';
            if (avatarFallback) avatarFallback.style.display = 'flex';
        }
        

        // Alle Discord Badges immer anzeigen
        function updateBadgesDisplay(discordData) {
            console.log('=== Displaying All Discord Badges ===');
            
            const badgesContainer = document.getElementById('discordBadges');
            if (!badgesContainer) return;

            // Leere Container
            badgesContainer.innerHTML = '';

            // Badges in korrekter Prioritätsreihenfolge (wie auf dem Bild)
            const allBadges = [
                {
                    class: 'discord-badge badge-discord-staff',
                    tooltip: 'Discord Staff'
                },
                {
                    class: 'discord-badge badge-early-supporter',
                    tooltip: 'Early Supporter'
                },
                {
                    class: 'discord-badge badge-early-verified-bot-developer',
                    tooltip: 'Early Verified Bot Developer'
                },
                {
                    class: 'discord-badge badge-discord-gold-bug-hunter',
                    tooltip: 'Discord Gold Bug Hunter'
                },
                {
                    class: 'discord-badge badge-active-developer',
                    tooltip: 'Active Developer'
                },
                {
                    class: 'discord-badge badge-nitro-24-months',
                    tooltip: 'Nitro Subscriber (24+ Months)'
                }
            ];

            // Erstelle ALLE Badge-Elemente
            allBadges.forEach(badge => {
                const badgeEl = document.createElement('div');
                badgeEl.className = badge.class;
                badgeEl.setAttribute('data-tooltip', badge.tooltip);
                badgesContainer.appendChild(badgeEl);
            });
            
            console.log(`✅ ${allBadges.length} Discord badges displayed (ALL BADGES)`);
        }

        // Globale Variable für aktuelle Spotify-Daten
        window.currentSpotifyData = null;
        
        // Lanyard WebSocket für Live-Discord-Updates
        let lanyardWS = null;
        
        function connectLanyardWebSocket() {
            const discordId = '743367299192586300';
            
            if (lanyardWS !== null) {
                return;
            }
            
            console.log('🔗 Connecting to Lanyard WebSocket for live Discord updates...');
            lanyardWS = new WebSocket('wss://api.lanyard.rest/socket');
            
            lanyardWS.onopen = function() {
                console.log('✅ Lanyard WebSocket connected!');
                // Subscribe to user updates
                lanyardWS.send(JSON.stringify({
                    op: 2,
                    d: {
                        subscribe_to_id: discordId
                    }
                }));
            };
            
            lanyardWS.onmessage = function(event) {
                try {
                    const data = JSON.parse(event.data);
                    console.log('📡 Lanyard WebSocket message:', data);
                    
                    if (data.t === 'INIT_STATE' || data.t === 'PRESENCE_UPDATE') {
                        const discordData = data.d;
                        console.log('🎵 Live Discord update received:', discordData);
                        
                        // Update Spotify data for live time
                        if (discordData.listening_to_spotify && discordData.spotify) {
                            window.currentSpotifyData = discordData.spotify;
                            console.log('🎵 Spotify data updated live:', window.currentSpotifyData);
                        } else {
                            window.currentSpotifyData = null;
                        }
                        
                        // Update all displays
                        updateActivitiesDisplay(discordData);
                    }
                } catch (error) {
                    console.error('❌ Error parsing Lanyard WebSocket message:', error);
                }
            };
            
            lanyardWS.onclose = function(event) {
                console.log('🔌 Lanyard WebSocket closed:', event.code, event.reason);
                lanyardWS = null;
                // Reconnect after 5 seconds
                setTimeout(connectLanyardWebSocket, 5000);
            };
            
            lanyardWS.onerror = function(error) {
                console.error('❌ Lanyard WebSocket error:', error);
            };
        }

        // Moderne Aktivitäten-Anzeige
        function updateActivitiesDisplay(discordData) {
            console.log('=== Updating Activities Display ===');
            console.log('Activities data:', discordData);
            
            const activitiesSection = document.getElementById('activitiesSection');
            if (!activitiesSection) return;

            // Speichere aktuelle Spotify-Daten für Live-Updates
            if (discordData.listening_to_spotify && discordData.spotify) {
                window.currentSpotifyData = discordData.spotify;
                console.log('🎵 Spotify data stored for live updates:', window.currentSpotifyData);
            } else {
                window.currentSpotifyData = null;
            }

            // Leere Section
            activitiesSection.innerHTML = '';

            // Status Header
            const statusHeader = document.createElement('div');
            statusHeader.className = 'status-header';
            
            const statusDot = document.createElement('div');
            statusDot.className = `status-dot ${discordData.discord_status || 'online'}`;
            
            const statusText = document.createElement('span');
            statusText.className = 'status-text';
            statusText.textContent = getStatusText(discordData.discord_status || 'online');
            
            statusHeader.appendChild(statusDot);
            statusHeader.appendChild(statusText);
            activitiesSection.appendChild(statusHeader);

            // Spotify Activity (höchste Priorität)
            if (discordData.listening_to_spotify && discordData.spotify) {
                const spotifyCard = createSpotifyCard(discordData.spotify);
                activitiesSection.appendChild(spotifyCard);
            }

            // Andere Aktivitäten
            if (discordData.activities && discordData.activities.length > 0) {
                discordData.activities.forEach(activity => {
                    if (activity.type !== 2) { // Nicht Spotify (type 2)
                        const activityCard = createActivityCard(activity);
                        if (activityCard) {
                            activitiesSection.appendChild(activityCard);
                        }
                    }
                });
            }

            // Falls keine Aktivitäten, zeige Standard-Message
            if (!discordData.listening_to_spotify && (!discordData.activities || discordData.activities.length === 0)) {
                const infoCard = document.createElement('div');
                infoCard.className = 'activity-card';
                infoCard.innerHTML = `
                    <div class="activity-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <div class="activity-info">
                        <div class="activity-name">3AM OPTiC Elite Member</div>
                        <div class="activity-details">Ready for gaming</div>
                    </div>
                `;
                activitiesSection.appendChild(infoCard);
            }
        }

        function createSpotifyCard(spotify) {
            const card = document.createElement('div');
            card.className = 'activity-card spotify';
            
            const trackImage = spotify.album_art_url || null;
            
            // Spotify Icon (schwarz mit Effekt)
            let iconHTML = `
                <div style="background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); border-radius: 8px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="white" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));">
                        <path d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm5.568 17.328a.75.75 0 01-1.032.264c-2.832-1.728-6.396-2.112-10.596-1.152a.75.75 0 01-.312-1.464c4.608-1.056 8.496-.6 11.676 1.32a.75.75 0 01.264 1.032zM19.2 14.4a.936.936 0 01-1.296.324c-3.24-1.992-8.172-2.568-12.024-1.404a.936.936 0 11-.456-1.812c4.392-1.332 9.828-.684 13.452 1.596a.936.936 0 01.324 1.296zM19.44 11.52a1.125 1.125 0 01-1.548.384c-3.708-2.196-9.804-2.4-13.332-1.332a1.125 1.125 0 11-.684-2.148c4.056-1.224 10.764-.948 14.88 1.548a1.125 1.125 0 01.384 1.548z"/>
                    </svg>
                </div>
            `;
            
            // Falls Album-Cover vorhanden, zeige es mit Spotify-Logo als Small-Icon
            if (trackImage) {
                iconHTML = `
                    <img class="activity-icon-large" src="${trackImage}" alt="${spotify.song}" 
                         onerror="this.style.display='none';">
                    <div class="activity-icon-small" style="background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="white" style="filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));">
                            <path d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm5.568 17.328a.75.75 0 01-1.032.264c-2.832-1.728-6.396-2.112-10.596-1.152a.75.75 0 01-.312-1.464c4.608-1.056 8.496-.6 11.676 1.32a.75.75 0 01.264 1.032zM19.2 14.4a.936.936 0 01-1.296.324c-3.24-1.992-8.172-2.568-12.024-1.404a.936.936 0 11-.456-1.812c4.392-1.332 9.828-.684 13.452 1.596a.936.936 0 01.324 1.296zM19.44 11.52a1.125 1.125 0 01-1.548.384c-3.708-2.196-9.804-2.4-13.332-1.332a1.125 1.125 0 11-.684-2.148c4.056-1.224 10.764-.948 14.88 1.548a1.125 1.125 0 01.384 1.548z"/>
                        </svg>
                    </div>
                `;
            }
            
            // Berechne Fortschritt für Live-Updates
            const startTime = spotify.timestamps?.start || Date.now();
            const endTime = spotify.timestamps?.end || Date.now() + 180000; // 3min default
            
            card.innerHTML = `
                <div class="activity-icon">
                    ${iconHTML}
                </div>
                <div class="activity-info">
                    <div class="activity-name">♫ ${spotify.song}</div>
                    <div class="activity-details">by ${spotify.artist}</div>
                    <div class="activity-state">on Spotify</div>
                    <div class="spotify-progress" data-start="${startTime}" data-end="${endTime}">
                        <div class="spotify-progress-fill"></div>
                    </div>
                    <div class="spotify-time" data-start-time="${startTime}" data-end-time="${endTime}">
                        ${formatSpotifyTime(spotify.timestamps)}
                    </div>
                </div>
            `;
            
            return card;
        }

        function createActivityCard(activity) {
            const card = document.createElement('div');
            card.className = 'activity-card';
            
            console.log('Creating activity card for:', activity);
            
            // Activity Icon Setup
            let largeImageUrl = null;
            let smallImageUrl = null;
            
            if (activity.assets) {
                // Large Image (Hauptbild)
                if (activity.assets.large_image) {
                    if (activity.assets.large_image.startsWith('mp:')) {
                        largeImageUrl = `https://media.discordapp.net/${activity.assets.large_image.replace('mp:', '')}`;
                    } else {
                        largeImageUrl = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.png`;
                    }
                }
                
                // Small Image (kleines Icon)
                if (activity.assets.small_image) {
                    if (activity.assets.small_image.startsWith('mp:')) {
                        smallImageUrl = `https://media.discordapp.net/${activity.assets.small_image.replace('mp:', '')}`;
                    } else {
                        smallImageUrl = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.png`;
                    }
                }
            }
            
            // Fallback Icons für bekannte Apps
            if (!largeImageUrl) {
                const appName = activity.name.toLowerCase();
                if (appName.includes('visual studio code')) {
                    largeImageUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMi41TDcuNSAyLjVDNi42NzE1NyAyLjUgNiAzLjE3MTU3IDYgNFYyMEM2IDIwLjgyODQgNi42NzE1NyAyMS41IDcuNSAyMS41SDE4LjVDMTkuMzI4NCAyMS41IDIwIDIwLjgyODQgMjAgMjBWNEMyMCAzLjE3MTU3IDE5LjMyODQgMi41IDE4LjUgMi41WiIgZmlsbD0iIzAwN0FDQyIvPgo8L3N2Zz4K';
                } else if (appName.includes('discord')) {
                    largeImageUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMxNyA0LjM2OTc2QzE4Ljc4NTMgMy42MjY3NiAxNy4xNDIzIDMuMDg5NzYgMTUuNDMyIDIuNzgxNzZDMTUuMjAwOCAzLjE3Njc2IDE0Ljk0MDggMy42OTM3NiAxNC43NjIgNC4wNjM3NkMxMi45MzczIDMuNzg5NzYgMTEuMTM3MyAzLjc4OTc2IDkuMzQ4IDQuMDYzNzZDOS4xNjkgMy42OTM3NiA4LjkwMiAzLjE3Njc2IDguNjcgMi43ODE3NkM2Ljk2IDMuMDg5NzYgNS4zMTcgMy42MjY3NiAzLjc4NSA0LjM2OTc2QzAuNjY0IDkuNDQ5NzYgLTAuMjU5IDEzLjc0OTggMC4wNTcgMTcuNzQ5OEMxLjkxMyAxOS4wNzk4IDMuNzE1IDIwLjA4OTggNS40NiAyMC43NDk4QzUuOTQyIDIwLjEwOTggNi4zNzkgMTkuNDE5OCA2Ljc2NCAxOC42ODk4QzYuMDU2IDE4LjQzOTggNS4zODQgMTguMTE5OCA0Ljc0OSAxNy43Mzk4QzQuOTE1IDE3LjY0OTggNS4wNzggMTcuNTU5OCA1LjIzNyAxNy40NTk4QzguNzMyIDE5LjA4OTggMTEuNzI1IDE5LjA4OTggMTUuMTk3IDE3LjQ1OThDMTUuMzU2IDE3LjU1OTggMTUuNTE5IDE3LjY0OTggMTUuNjg1IDE3LjczOThDMTUuMDUgMTguMTE5OCAxNC4zNzggMTguNDM5OCAxMy42NyAxOC42ODk4QzE0LjA1NSAxOS40MTk4IDE0LjQ5MiAyMC4xMDk4IDE0Ljk3NCAyMC43NDk4QzE2LjcxOSAyMC4wODk4IDE4LjUyMSAxOS4wNzk4IDIwLjM3NyAxNy43NDk4QzIwLjc5MyAxMy4yNzk4IDE5LjY3NyA4LjkwOTc2IDIwLjMxNyA0LjM2OTc2WiIgZmlsbD0iIzU4NjVGMiIvPgo8L3N2Zz4K';
                }
            }
            
            // Zeitstempel formatieren
            let timeString = '';
            let timestampText = '';
            if (activity.timestamps) {
                if (activity.timestamps.start) {
                    const elapsed = Date.now() - activity.timestamps.start;
                    timeString = formatElapsedTime(elapsed);
                    timestampText = `${timeString} elapsed`;
                }
            }
            
            // App Name prefix
            let namePrefix = '';
            switch(activity.type) {
                case 0: namePrefix = 'Playing '; break;
                case 1: namePrefix = 'Streaming '; break;
                case 2: namePrefix = 'Listening to '; break;
                case 3: namePrefix = 'Watching '; break;
                case 5: namePrefix = 'Competing in '; break;
                default: namePrefix = '';
            }
            
            // HTML erstellen
            let iconHTML = '';
            if (largeImageUrl) {
                iconHTML = `
                    <img class="activity-icon-large" src="${largeImageUrl}" alt="${activity.name}" 
                         onerror="this.style.display='none';">
                `;
            }
            
            if (smallImageUrl) {
                iconHTML += `
                    <img class="activity-icon-small" src="${smallImageUrl}" alt="Small Icon" 
                         onerror="this.style.display='none';">
                `;
            }
            
            // Falls keine Icons, zeige Fallback
            if (!iconHTML) {
                iconHTML = `<div style="color: #72767d; font-size: 24px;">⚫</div>`;
            }
            
            card.innerHTML = `
                <div class="activity-icon">
                    ${iconHTML}
                </div>
                <div class="activity-info">
                    <div class="activity-name">${namePrefix}${activity.name}</div>
                    ${activity.details ? `<div class="activity-details">${activity.details}</div>` : ''}
                    ${activity.state ? `<div class="activity-state">${activity.state}</div>` : ''}
                    ${timeString ? `<div class="activity-time" data-start-time="${activity.timestamps?.start || Date.now()}">${timeString}</div>` : ''}
                </div>
            `;
            
            return card;
        }

        function getActivityPrefix(type) {
            switch(type) {
                case 0: return '🎮 Playing';
                case 1: return '🔴 Streaming';
                case 2: return '🎵 Listening to';
                case 3: return '📺 Watching';
                case 4: return '';
                case 5: return '🏆 Competing in';
                default: return '';
            }
        }

        function getStatusText(status) {
            switch(status) {
                case 'online': return 'Online';
                case 'idle': return 'Away';
                case 'dnd': return 'Do Not Disturb';
                case 'offline': return 'Offline';
                default: return 'Online';
            }
        }

        function formatSpotifyTime(timestamps) {
            if (!timestamps || !timestamps.start || !timestamps.end) return '';
            
            const elapsed = Date.now() - timestamps.start;
            const total = timestamps.end - timestamps.start;
            const progress = Math.min(elapsed / total, 1);
            
            const elapsedMin = Math.floor(elapsed / 60000);
            const elapsedSec = Math.floor((elapsed % 60000) / 1000);
            const totalMin = Math.floor(total / 60000);
            const totalSec = Math.floor((total % 60000) / 1000);
            
            return `${elapsedMin}:${elapsedSec.toString().padStart(2, '0')} / ${totalMin}:${totalSec.toString().padStart(2, '0')}`;
        }

        function formatElapsedTime(elapsed) {
            const hours = Math.floor(elapsed / 3600000);
            const minutes = Math.floor((elapsed % 3600000) / 60000);
            const seconds = Math.floor((elapsed % 60000) / 1000);
            
            if (hours > 0) {
                return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            } else {
                return `${minutes}:${seconds.toString().padStart(2, '0')}`;
            }
        }

        // Live Timestamp Updates alle Sekunde
        let timestampUpdateInterval = null;

        function startTimestampUpdates() {
            // Clear existing interval
            if (timestampUpdateInterval) {
                clearInterval(timestampUpdateInterval);
            }

            timestampUpdateInterval = setInterval(() => {
                const activityCards = document.querySelectorAll('.activity-card');
                
                activityCards.forEach(card => {
                    const timeElement = card.querySelector('.activity-time');
                    const timestampElement = card.querySelector('.activity-timestamp');
                    
                    // Normale Activity Updates
                    if (timeElement && timeElement.dataset.startTime && !timeElement.classList.contains('spotify-time')) {
                        const startTime = parseInt(timeElement.dataset.startTime);
                        const elapsed = Date.now() - startTime;
                        const formattedTime = formatElapsedTime(elapsed);
                        
                        timeElement.textContent = formattedTime;
                        
                        if (timestampElement) {
                            timestampElement.textContent = `${formattedTime} elapsed`;
                        }
                    }
                    
                    // Spotify Live-Updates (ultra-smooth) - Funktioniert wie normale Activities
                    if (timeElement && timeElement.classList.contains('spotify-time')) {
                        // Hole die aktuellen Spotify-Daten aus dem globalen State
                        const spotifyCard = timeElement.closest('.activity-card.spotify');
                        if (spotifyCard && window.currentSpotifyData) {
                            const spotify = window.currentSpotifyData;
                            
                            if (spotify.timestamps && spotify.timestamps.start && spotify.timestamps.end) {
                                const now = Date.now();
                                const elapsed = Math.max(0, now - spotify.timestamps.start);
                                const total = spotify.timestamps.end - spotify.timestamps.start;
                                
                                // Stelle sicher, dass wir nicht über die Gesamtzeit hinausgehen
                                const safeElapsed = Math.min(elapsed, total);
                                
                                // Präzise Zeitberechnung
                                const currentSeconds = Math.floor(safeElapsed / 1000);
                                const totalSeconds = Math.floor(total / 1000);
                                
                                // Format: MM:SS / MM:SS
                                const currentMinutes = Math.floor(currentSeconds / 60);
                                const currentSecondsRemainder = currentSeconds % 60;
                                const totalMinutes = Math.floor(totalSeconds / 60);
                                const totalSecondsRemainder = totalSeconds % 60;
                                
                                const currentTimeStr = `${currentMinutes}:${currentSecondsRemainder.toString().padStart(2, '0')}`;
                                const totalTimeStr = `${totalMinutes}:${totalSecondsRemainder.toString().padStart(2, '0')}`;
                                
                                timeElement.textContent = `${currentTimeStr} / ${totalTimeStr}`;
                                
                                // Ultra-smooth Progress Bar Update
                                const progressElement = card.querySelector('.spotify-progress');
                                const progressFill = card.querySelector('.spotify-progress-fill');
                                if (progressElement && progressFill) {
                                    const progressPercent = Math.min((safeElapsed / total) * 100, 100);
                                    progressFill.style.width = `${progressPercent}%`;
                                }
                            } else {
                                timeElement.textContent = '0:00 / 0:00';
                            }
                        } else {
                            // Fallback - verwende die gespeicherten Timestamps
                            const startTime = parseInt(timeElement.dataset.startTime);
                            const endTime = parseInt(timeElement.dataset.endTime);
                            
                            if (startTime && endTime && startTime > 0 && endTime > startTime) {
                                const now = Date.now();
                                const elapsed = Math.max(0, now - startTime);
                                const total = endTime - startTime;
                                const safeElapsed = Math.min(elapsed, total);
                                
                                const currentSeconds = Math.floor(safeElapsed / 1000);
                                const totalSeconds = Math.floor(total / 1000);
                                
                                const currentMinutes = Math.floor(currentSeconds / 60);
                                const currentSecondsRemainder = currentSeconds % 60;
                                const totalMinutes = Math.floor(totalSeconds / 60);
                                const totalSecondsRemainder = totalSeconds % 60;
                                
                                const currentTimeStr = `${currentMinutes}:${currentSecondsRemainder.toString().padStart(2, '0')}`;
                                const totalTimeStr = `${totalMinutes}:${totalSecondsRemainder.toString().padStart(2, '0')}`;
                                
                                timeElement.textContent = `${currentTimeStr} / ${totalTimeStr}`;
                                
                                const progressElement = card.querySelector('.spotify-progress');
                                const progressFill = card.querySelector('.spotify-progress-fill');
                                if (progressElement && progressFill) {
                                    const progressPercent = Math.min((safeElapsed / total) * 100, 100);
                                    progressFill.style.width = `${progressPercent}%`;
                                }
                            } else {
                                timeElement.textContent = '0:00 / 0:00';
                            }
                        }
                    }
                });
            }, 50); // Extrem schnelle Updates für perfekt fließende Zeit
        }

        // Zentrale Fallback-Funktion
        function showFallbackProfile(userId) {
            console.log('🔄 Showing fallback profile for:', userId);
            
            const profileData = {
                id: userId,
                username: "М̸̽̾и̶̃̀ш̷͗̇к҉̎͊̐а̴̇̍",
                discriminator: "",
                avatar: null,
                status: "online",
                activities: [
                    {
                        name: "3AM OPTiC",
                        details: "Elite Gaming Community",
                        state: "Ready to game",
                        type: 0
                    }
                ],
                spotify: null,
                listening_to_spotify: false
            };
            
            // Update all displays
            console.log('Updating profile display...');
            updateProfileDisplay(profileData);
            
            console.log('Updating badges display...');
            updateBadgesDisplay({ 
                discord_user: { 
                    id: profileData.id, 
                    avatar: profileData.avatar,
                    username: profileData.username
                },
                activities: profileData.activities 
            });
            
            console.log('Updating activities display...');
            updateActivitiesDisplay({ 
                discord_status: profileData.status,
                discord_user: {
                    username: profileData.username
                },
                activities: profileData.activities,
                listening_to_spotify: false,
                spotify: null
            });
            
            console.log('✅ Fallback profile displayed');
        }

        // Verbesserte Avatar-Dekoration
        function applyAvatarDecoration(decorationData) {
            console.log('=== Applying Avatar Decoration ===');
            console.log('Decoration data:', decorationData);
            
            if (!decorationData) {
                console.log('No decoration data provided');
                return;
            }
            
            const avatarContainer = document.querySelector('.profile-avatar');
            if (!avatarContainer) {
                console.log('Avatar container not found');
                return;
            }
            
            // Entferne vorherige Dekoration
            const existingDecoration = avatarContainer.querySelector('.avatar-decoration');
            if (existingDecoration) {
                existingDecoration.remove();
                console.log('Removed existing decoration');
            }
            
            // Erstelle neue Dekoration
            const decoration = document.createElement('div');
            decoration.className = 'avatar-decoration';
            
            // Verschiedene Dekoration-URL-Formate versuchen
            let decorationUrl;
            if (decorationData.asset) {
                decorationUrl = `https://cdn.discordapp.com/avatar-decoration-presets/${decorationData.asset}.png?size=240`;
            } else if (decorationData.sku_id) {
                decorationUrl = `https://cdn.discordapp.com/avatar-decoration-presets/${decorationData.sku_id}.png?size=240`;
            } else {
                console.log('No valid decoration asset found');
                return;
            }
            
            console.log('Decoration URL:', decorationUrl);
            
            decoration.style.cssText = `
                position: absolute;
                top: -10px;
                left: -10px;
                width: calc(100% + 20px);
                height: calc(100% + 20px);
                background-image: url('${decorationUrl}');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                pointer-events: none;
                z-index: 2;
                opacity: 0;
                transition: opacity 0.3s ease;
            `;
            
            avatarContainer.appendChild(decoration);
            
            // Teste ob Dekoration lädt
            const testImg = new Image();
            testImg.onload = function() {
                console.log('✅ Avatar decoration loaded successfully!');
                decoration.style.opacity = '1';
            };
            testImg.onerror = function() {
                console.log('❌ Avatar decoration failed to load');
                decoration.remove();
            };
            testImg.src = decorationUrl;
        }

        // Live Discord Updates mit WebSocket
        let discordWebSocket = null;
        let heartbeatInterval = null;

        function setupLiveDiscordUpdates(userId) {
            console.log('🔴 Setting up Live Discord Updates for:', userId);
            
            try {
                // Schließe bestehende Verbindung
                if (discordWebSocket) {
                    discordWebSocket.close();
                }
                
                // Neue Lanyard WebSocket Verbindung
                discordWebSocket = new WebSocket('wss://api.lanyard.rest/socket');
                
                discordWebSocket.onopen = function() {
                    console.log('✅ Discord Live WebSocket connected!');
                    
                    // Subscribe zu User ID
                    discordWebSocket.send(JSON.stringify({
                        op: 2,
                        d: {
                            subscribe_to_id: userId
                        }
                    }));
                };
                
                discordWebSocket.onmessage = function(event) {
                    const message = JSON.parse(event.data);
                    console.log('📨 Discord WebSocket Message:', message);
                    
                    switch(message.op) {
                        case 1: // Hello
                            console.log('👋 Discord WebSocket Hello received');
                            // Start heartbeat
                            const heartbeatInterval = setInterval(() => {
                                if (discordWebSocket.readyState === WebSocket.OPEN) {
                                    discordWebSocket.send(JSON.stringify({ op: 3 }));
                                    console.log('💓 Heartbeat sent');
                                }
                            }, message.d.heartbeat_interval);
                            break;
                            
                        case 0: // Event
                            if (message.t === 'INIT_STATE' || message.t === 'PRESENCE_UPDATE') {
                                console.log('🔄 Live Discord data received!');
                                const discordData = message.d;
                                
                                if (discordData && discordData.discord_user) {
                                    const profileData = {
                                        id: discordData.discord_user.id,
                                        username: discordData.discord_user.username || discordData.discord_user.global_name,
                                        discriminator: discordData.discord_user.discriminator !== '0' ? discordData.discord_user.discriminator : '',
                                        avatar: discordData.discord_user.avatar,
                                        avatar_decoration: discordData.discord_user.avatar_decoration_data,
                                        status: discordData.discord_status,
                                        activities: discordData.activities || [],
                                        spotify: discordData.spotify,
                                        listening_to_spotify: discordData.listening_to_spotify
                                    };
                                    
                                    // Live Update aller Anzeigen
                                    updateProfileDisplay(profileData);
                                    updateBadgesDisplay(discordData);
                                    updateActivitiesDisplay(discordData);
                                    
                                    console.log('✨ Live update completed!');
                                    console.log('   └─ Status:', discordData.discord_status);
                                    console.log('   └─ Activities:', discordData.activities?.length || 0);
                                    console.log('   └─ Spotify:', discordData.listening_to_spotify ? 'Playing' : 'Not playing');
                                }
                            }
                            break;
                    }
                };
                
                discordWebSocket.onclose = function(event) {
                    console.log('❌ Discord WebSocket closed:', event.code, event.reason);
                    
                    // Clear heartbeat
                    if (heartbeatInterval) {
                        clearInterval(heartbeatInterval);
                    }
                    
                    // Automatische Wiederverbindung nach 5 Sekunden
                    setTimeout(() => {
                        console.log('🔄 Reconnecting Discord WebSocket...');
                        setupLiveDiscordUpdates(userId);
                    }, 5000);
                };
                
                discordWebSocket.onerror = function(error) {
                    console.error('💥 Discord WebSocket Error:', error);
                };
                
            } catch (error) {
                console.error('🚨 WebSocket Setup Error:', error);
                
                // Fallback: Polling alle 30 Sekunden
                console.log('🔄 Falling back to polling...');
                setInterval(() => {
                    loadLanyardData(userId).catch(console.error);
                }, 30000);
            }
        }

        // Verbesserte Presence-Anzeige
        function updatePresenceTimestamp(data) {
            if (data.activities && data.activities.length > 0) {
                const activity = data.activities[0];
                if (activity.timestamps && activity.timestamps.start) {
                    const startTime = new Date(activity.timestamps.start);
                    const now = new Date();
                    const elapsed = Math.floor((now - startTime) / 1000);
                    
                    const hours = Math.floor(elapsed / 3600);
                    const minutes = Math.floor((elapsed % 3600) / 60);
                    
                    let timeString = '';
                    if (hours > 0) timeString += `${hours}h `;
                    timeString += `${minutes}m`;
                    
                    const statusActivity = document.getElementById('statusActivity');
                    if (statusActivity && timeString) {
                        statusActivity.textContent += ` • ${timeString}`;
                    }
                }
            }
        }

                    // Initialisierung nach DOM-Load
            document.addEventListener('DOMContentLoaded', function() {
                chatContainer = document.querySelector('.chat-container');
                chatMessages = document.querySelector('.chat-messages');
                textarea = document.querySelector('.chat-input textarea');
                sendButton = document.querySelector('.send-message');
                aiButton = document.querySelector('.ai-bubble');

                // Event Listeners
                if (aiButton) {
                    aiButton.onclick = toggleChat;
                }

                if (textarea) {
                    textarea.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter' && !e.shiftKey) {
                            e.preventDefault();
                            sendMessage();
                        }
                    });
                }

                if (sendButton) {
                    sendButton.onclick = sendMessage;
                }

                console.log('=== 3AM OPTiC Discord Integration Starting ===');
                
                // Discord-ID
                const discordId = '743367299192586300';
                console.log('Discord ID:', discordId);

                // Zeige Loading-Status
                console.log('Setting up loading state...');
                
                // Initial loading state
                const activitiesSection = document.getElementById('activitiesSection');
                if (activitiesSection) {
                    activitiesSection.innerHTML = `
                        <div class="status-header">
                            <div class="status-dot"></div>
                            <span class="status-text">Loading Discord data...</span>
                        </div>
                    `;
                }

                // Lade Discord-Profil mit Live-Updates
                console.log('Starting Discord profile loading with live updates...');
                
                // Timeout für Discord API (10 Sekunden)
                const loadingTimeout = setTimeout(() => {
                    console.log('⏰ Discord loading timeout, showing fallback...');
                    showFallbackProfile(discordId);
                }, 10000);
                
                loadDiscordProfile()
                    .then(() => {
                        console.log('✅ Discord profile loaded successfully!');
                        clearTimeout(loadingTimeout);
                        
                        // Starte Live-Updates nach erfolgreichem Laden
                        console.log('🚀 Starting live Discord updates...');
                        setupLiveDiscordUpdates(discordId);
                        
                        // Starte Live-Timestamp-Updates
                        console.log('⏰ Starting live timestamp updates...');
                        startTimestampUpdates();
                    })
                    .catch(error => {
                        console.error('❌ Discord profile loading failed:', error);
                        clearTimeout(loadingTimeout);
                        
                        // Show fallback but still try live updates
                        console.log('🔄 Showing fallback profile due to error...');
                        showFallbackProfile(discordId);
                        
                        // Versuche trotzdem Live-Updates
                        console.log('🔄 Attempting live updates despite API failure...');
                        setupLiveDiscordUpdates(discordId);
                        
                        // Starte Live-Timestamp-Updates auch im Fallback
                        console.log('⏰ Starting live timestamp updates (fallback)...');
                        startTimestampUpdates();
                    });

                // Willkommensnachricht  
                setTimeout(() => {
                    addMessage("Welcome to 3AM OPTiC AI Chat! 🎮\n\nThe chat is currently in development. For support, please visit our Discord server.\n\n**Current Features:**\n• Live Discord Status Integration\n• Real-time Avatar & Badges\n• Gaming Activity Tracking\n\n**For live Discord status:**\n1. Join Lanyard Discord: https://discord.gg/lanyard\n2. Run `/add` command with your Discord ID\n3. Refresh this page for live updates!");
                }, 2000);
                
                // Detaillierter API-Test
                console.log('🧪 Testing Discord APIs...');
                
                // Test 1: Lanyard API
                fetch(`https://api.lanyard.rest/v1/users/${discordId}`)
                    .then(response => {
                        console.log('🧪 Lanyard API Status:', response.status, response.statusText);
                        return response.json();
                    })
                    .then(data => {
                        console.log('🧪 Lanyard API Result:', data.success ? '✅ SUCCESS' : '❌ FAILED');
                        if (data.success) {
                            console.log('   └─ User:', data.data.discord_user.username);
                            console.log('   └─ Status:', data.data.discord_status);
                            console.log('   └─ Activities:', data.data.activities?.length || 0);
                        } else {
                            console.log('   └─ Error:', data.error?.message || 'Unknown error');
                            if (data.error?.code === 'user_not_monitored') {
                                console.log('   └─ Solution: Join https://discord.gg/lanyard and run /add');
                            }
                        }
                    })
                    .catch(error => {
                        console.log('🧪 Lanyard API Error:', error.message);
                    });
                
                // Test 2: Discord Lookup API
                fetch(`https://discordlookup.mesalytic.moe/v1/user/${discordId}`)
                    .then(response => {
                        console.log('🧪 Discord Lookup Status:', response.status, response.statusText);
                        return response.json();
                    })
                    .then(data => {
                        console.log('🧪 Discord Lookup Result:', data.id ? '✅ SUCCESS' : '❌ FAILED');
                        if (data.id) {
                            console.log('   └─ User:', data.username);
                            console.log('   └─ Avatar:', data.avatar ? 'Yes' : 'No');
                        }
                    })
                    .catch(error => {
                        console.log('🧪 Discord Lookup Error:', error.message);
                    });
            });
    </script>
</body>
</html>