<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>GROZLAN</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
            color: white;
            font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Voorkom scrollbars door canvas/animaties */
        }

        /* Intro screen */
        .intro-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            color: white;
            text-align: center;
            transition: opacity 0.5s ease-out; /* Added for fade-out */
        }
        
        .intro-title {
            font-family: 'Courier New', monospace;
            font-size: 2rem;
            margin-bottom: 2rem;
            letter-spacing: 4px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }
        
        .intro-text {
            font-family: 'Courier New', monospace;
            max-width: 600px;
            margin: 0 auto 2rem;
            line-height: 1.6;
            padding: 0 20px;
        }
        
        .intro-options {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .intro-button {
            background: none;
            border: 1px solid white;
            color: white;
            padding: 12px 25px;
            font-family: 'Courier New', monospace;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .intro-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 8px white;
        }
        
        .intro-button.primary {
            border-color: #ffffff;
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* Main content container (initially hidden) */
        #mainContent {
            display: none; /* Hide main content initially */
            width: 100%;
            height: 100vh; /* Use full viewport height */
            flex-direction: column; /* Stack logo and terminal section */
            justify-content: center; /* Center content vertically */
            align-items: center;
            position: relative;
        }

        /* Main content */
        .logo-container {
            flex-grow: 1; /* Allow logo to take up available space */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 300px; /* Minimum height */
            position: relative; /* Needed for absolute positioned logos */
            overflow: visible; /* Allow potential overflow for effects */
        }

        .logo-bg, .logo-fg {
            max-width: 95%;
            max-height: 80vh;
            opacity: 0; /* Start fully invisible */
            width: 1000px; /* Base width */
            height: auto;
            object-fit: contain;
            mix-blend-mode: normal !important;
            filter: none !important;
            background: none !important;
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            transform-origin: center center;
            will-change: opacity, transform; /* Optimize animation performance */
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Masker voor sterren, altijd zichtbaar zonder fade */
        .logo-mask {
            max-width: 95%;
            max-height: 80vh;
            width: 1000px;
            height: auto;
            object-fit: contain;
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9); /* Begin met dezelfde schaal als logo-bg */
            z-index: 1; /* Tussen gloed (0) en logo foreground (3) */
            opacity: 1; /* Direct volledig zichtbaar */
            filter: none; /* Verwijder alle filters */
            clip-path: circle(40% at center); /* Beperk de afbeelding tot een cirkel */
            animation: maskScale 15s cubic-bezier(0.01, 0.1, 0.2, 1) forwards 1.5s; /* Alleen schaal-animatie */
            background-color: transparent; /* Verwijder de zwarte achtergrond */
            /* box-shadow verwijderd */
        }


        /* Specifieke stijl voor logo-bg, overschrijft eerdere mix-blend-mode */
        .logo-bg {
            mix-blend-mode: normal; /* Geen screen effect voor bg logo */
            z-index: 2; /* Boven het masker */
        }

        .logo-fg {
            transform: translate(-50%, -50%) scale(0.95); /* Slightly different start scale */
            z-index: 3; /* Ensure foreground is above background and mask */
            top: 55%; /* Explicitly set here too */
        }

        .animate-bg {
            animation: fadeInBg 15s cubic-bezier(0.01, 0.1, 0.2, 1) forwards 1.5s;
        }

        .animate-fg {
            animation: fadeInFg 14s cubic-bezier(0.01, 0.1, 0.2, 1) forwards 5s, 
                       subtleFloat 15s ease-in-out infinite alternate 19s; /* Add floating animation */
        }

        @keyframes fadeInBg {
            0% { 
                opacity: 0; 
                transform: translate(-50%, -50%) scale(0.9);
            }
            100% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes fadeInFg {
            0% { 
                opacity: 0; 
                transform: translate(-50%, -50%) scale(0.95);
            }
            100% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes subtleFloat {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50.2%, -49.8%) scale(1.01); /* Subtle movement */
            }
        }

        .terminal-section {
            padding-bottom: 30px;
            width: 100%;
            text-align: center;
            /* Removed fixed positioning, will be part of flex layout */
            height: 60px; /* Fixed height */
            opacity: 0; /* Start hidden */
            transition: opacity 1s ease-in;
            z-index: 10; /* Ensure it's above canvas but below terminal overlay */
            flex-shrink: 0; /* Prevent shrinking */
        }

        .terminal-section.visible {
            opacity: 1;
        }

        #terminal-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative; /* For cursor positioning if needed */
            height: 100%; /* Take full height of terminal-section */
        }

        #terminal-text {
            color: white;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
        }

        .server-link {
            font-size: 0.85rem;
            color: white;
            text-decoration: none;
            font-family: 'Courier New', monospace;
            opacity: 0; /* Start hidden */
            transition: opacity 0.5s ease-in; /* Fade in */
            cursor: pointer; /* Add cursor pointer */
        }

        .server-link.visible {
            opacity: 1;
        }

        .server-link:hover {
            text-shadow: 0 0 8px white;
        }
        
        .cursor {
            display: inline-block;
            width: 8px;
            height: 15px; /* Match font size */
            background-color: white;
            animation: blink 1s step-end infinite;
            margin-left: 2px;
            vertical-align: middle;
        }

        @keyframes blink {
            50% { opacity: 0; }
        }

        /* Terminal overlay styling */
        .terminal-overlay {
            position: fixed;
            bottom: -100%; 
            left: 50%; 
            transform: translateX(-50%);
            width: 90%; 
            max-width: 800px; 
            height: 80%; 
            background-color: rgba(0, 0, 0, 0.9);
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: bottom 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, 
                        height 0.5s ease-in-out 0.2s, 
                        width 0.5s ease-in-out 0.2s,
                        left 0.5s ease-in-out 0.2s, 
                        transform 0.5s ease-in-out 0.2s,
                        box-shadow 0.3s ease-in-out; /* Toegevoegd voor hover glow */
            overflow: hidden;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.15),
                        inset 0 0 10px rgba(255, 255, 255, 0.05);
            padding: 0;
            transform-origin: bottom right; /* Toegevoegd voor animatie perceptie */
        }

        /* Stijl voor geminimaliseerde terminal: MIDDEN ONDER, klein */
        .terminal-overlay.minimized {
            bottom: 45px; /*  */
            left: 50%; /* Centreer horizontaal */
            transform: translateX(-50%); /* Correctie voor centreren */
            /* right: 20px; Verwijderd */
            width: 250px; /* Behoud breedte */
            height: 40px; /* Behoud hoogte */
            overflow: hidden; 
            cursor: pointer; /* Maak duidelijk dat je erop kunt klikken */
        }

        /* Gloed effect bij hover op geminimaliseerde terminal */
        .terminal-overlay.minimized:hover {
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), /* Witte gloed */
                        inset 0 0 8px rgba(255, 255, 255, 0.1); /* Subtiele inner glow */
        }

        .terminal-overlay.active {
            bottom: 10%; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 90%; 
            max-width: 800px; 
            height: 80%; 
        }

        .terminal-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 10px 20px;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 110;
            height: 30px;
            flex-shrink: 0;
        }

        .terminal-header > div {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .terminal-title {
            color: #ffffff;
            font-size: 1em;
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
            white-space: nowrap; /* Prevent title wrapping */
            overflow: hidden;    /* Hide overflow if minimized */
            text-overflow: ellipsis; /* Add ellipsis if text overflows */
        }

        .terminal-close {
            color: #ff3333;
            text-decoration: none;
            cursor: pointer;
            font-family: sans-serif;
            font-size: 1.4em;
            font-weight: bold;
            border-radius: 3px;
            transition: background-color 0.2s, color 0.2s, text-shadow 0.2s;
            text-shadow: 0 0 6px rgba(255, 51, 51, 0.6);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
        }

        .terminal-close:hover {
            background-color: rgba(255, 51, 51, 0.2);
            color: #ffcccc;
            text-shadow: 0 0 6px rgba(255, 51, 51, 0.6),
                         0 0 12px rgba(255, 102, 102, 0.8);
        }
        
        .terminal-minimize {
            color: #ddd;
            text-decoration: none;
            cursor: pointer;
            border-radius: 3px;
            transition: background-color 0.2s, color 0.2s, text-shadow 0.2s;
            text-shadow: 0 0 6px rgba(221, 221, 221, 0.6);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            position: relative;
        }

        .terminal-minimize::before {
            content: '';
            display: block;
            width: 12px;
            height: 2px;
            background-color: #ddd;
            transition: background-color 0.2s;
        }

        .terminal-minimize:hover {
            background-color: rgba(221, 221, 221, 0.2);
            text-shadow: 0 0 6px rgba(221, 221, 221, 0.6),
                         0 0 12px rgba(255, 255, 255, 0.8);
        }

        .terminal-minimize:hover::before {
            background-color: #fff;
        }

        /* Hide minimize button when terminal is minimized */
        .terminal-overlay.minimized .terminal-minimize {
            display: none;
        }

        /* Hide close button when terminal is minimized */
        .terminal-overlay.minimized .terminal-close {
            display: none;
        }

        /* Hide the entire header when minimized */
        /* .terminal-overlay.minimized .terminal-header {
            display: none;
        } */

        /* Show a restore icon (placeholder) when minimized */
        /* .terminal-overlay.minimized .terminal-header > div { ... } */

        .terminal-content {
            flex-grow: 1;
            position: relative;
            background-color: transparent;
            overflow-y: auto;
            padding: 15px;
            color: #f0f0f0;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            text-shadow: 0 0 5px rgba(240, 240, 240, 0.5);
            /* Hide content when minimized */
            /* display: block; Default display */
        }

        /* .terminal-overlay.minimized .terminal-content {
             display: none;
        } */

        /* Terminal Cursor Styling */
        .terminal-cursor {
            display: inline-block;
            background-color: #f0f0f0;
            width: 9px; 
            height: 1em; 
            margin-left: 1px;
            vertical-align: middle; 
            animation: terminalBlink 1s step-end infinite;
            box-shadow: 0 0 5px rgba(240, 240, 240, 0.5); 
        }

        @keyframes terminalBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        /* Audio controls styling */
        .audio-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 50;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            padding: 5px 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            display: flex; /* Changed from none to flex */
            align-items: center;
            gap: 10px;
            opacity: 0; /* Start hidden */
            transition: opacity 1s ease-in;
            visibility: hidden; /* Use visibility for better control */
        }
        
        .audio-controls.visible {
            opacity: 0.7;
            visibility: visible; /* Make visible */
        }
        
        .audio-controls:hover {
            opacity: 1;
        }
        
        .audio-button {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-size: 1.2rem;
            padding: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Sterrenhemel achtergrond */
        #starfieldCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Behind all other content (terug naar origineel) */
            display: block;
            background-color: transparent;
            opacity: 0; /* Start invisible */
            animation: fadeInCanvas 10s ease-out forwards 1.5s; /* Fade in with logo */
            will-change: opacity;
        }

        /* Extra canvas specifiek voor de slang - verwijderd omdat deze niet meer nodig is */

        @keyframes fadeInCanvas {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        @media (max-width: 768px) {
             /* Existing intro options adjustment */
            .intro-options {
                flex-direction: column;
            }
            /* Add any other responsive adjustments if needed */
            .terminal-overlay.minimized {
                 /* left: auto; Verwijderd */
                 /* right: 15px; Verwijderd */
                 /* width: 220px; Verwijderd */ 
                 /* Behoudt nu de algemene gecentreerde stijl */
             }
        }

        @media (max-width: 480px) {
            /* Existing intro title adjustment */
            .intro-title {
                font-size: 1.5rem;
            }
            .terminal-title {
                 font-size: 0.9em;
            }
            .terminal-overlay.minimized {
                 /* right: 10px; Verwijderd */
                 /* width: 200px; Verwijderd */
                 /* Behoudt nu de algemene gecentreerde stijl */
            }
            /* Add any other responsive adjustments if needed */
        }

        /* Styling voor klikbare commando links in terminal */
        .command-link {
            color: #aaeaff; /* Lichtblauw voor onderscheid */
            text-decoration: none;
            cursor: pointer;
        }

        .command-link:hover {
            text-decoration: underline;
            text-shadow: 0 0 5px #aaeaff;
        }

        .terminal-line {
            line-height: 1.4; /* Goede regelhoogte zonder extra lijnen */
            border: none; /* Geen borders */
            margin: 0; /* Geen marges die extra witruimte creëren */
            background: transparent; /* Geen achtergrondkleur */
        }
        
        .terminal-line.output {
            border: none; /* Zorg ervoor dat er geen border is */
            border-bottom: none; /* Specifiek geen onderborder */
            margin-bottom: 0; /* Geen marge onderaan */
        }
        
        /* Zorg dat lege regels niet te hoog zijn */
        .terminal-line.output:empty {
            height: 0.7em; /* Kleinere hoogte voor lege regels */
            min-height: 0; /* Geen minimumhoogte */
        }

        /* Data Node Popup Styling - Aangepast naar terminal-stijl */
        .data-node-overlay {
            position: fixed;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            width: 98vw;
            max-width: 1200px;
            height: 90vh;
            background: none;
            z-index: 200;
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .data-node-overlay.active {
            display: flex;
            opacity: 1;
        }
        .data-node-window {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(255,255,255,0.15), inset 0 0 10px rgba(255,255,255,0.05);
            overflow: hidden;
            padding: 0;
        }
        .data-node-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 10px 20px;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 110;
            height: 30px;
            flex-shrink: 0;
        }
        .data-node-title {
            color: #ffffff;
            font-size: 1em;
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 6px rgba(255,255,255,0.6);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .data-node-close {
            color: #ff3333;
            text-decoration: none;
            cursor: pointer;
            font-family: sans-serif;
            font-size: 1.4em;
            font-weight: bold;
            border-radius: 3px;
            transition: background-color 0.2s, color 0.2s, text-shadow 0.2s;
            text-shadow: 0 0 6px rgba(255, 51, 51, 0.6);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
        }
        .data-node-close:hover {
            background-color: rgba(255, 51, 51, 0.2);
            color: #ffcccc;
            text-shadow: 0 0 6px rgba(255, 51, 51, 0.6), 0 0 12px rgba(255, 102, 102, 0.8);
        }
        .data-node-content {
            flex-grow: 1;
            position: relative;
            background-color: transparent;
            overflow-y: auto;
            padding: 0;
            color: #f0f0f0;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            text-shadow: 0 0 5px rgba(240,240,240,0.5);
        }
        .data-node-iframe {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: 100%;
            min-height: 100%;
            border: none;
            background-color: #0a0a0a;
            display: block;
            overflow-x: hidden;
        }
        /* Mooie custom scrollbars voor node overlay en iframe */
        .data-node-content, .data-node-iframe {
            scrollbar-width: thin;
            scrollbar-color: #39ff14 #181818;
        }
        .data-node-content::-webkit-scrollbar, .data-node-iframe::-webkit-scrollbar {
            width: 10px;
            background: #181818;
        }
        .data-node-content::-webkit-scrollbar-thumb, .data-node-iframe::-webkit-scrollbar-thumb {
            background: linear-gradient(120deg, #39ff14 0%, #0a0a0a 100%);
            border-radius: 6px;
            min-height: 40px;
            border: 2px solid #181818;
        }
        .data-node-content::-webkit-scrollbar-thumb:hover, .data-node-iframe::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(120deg, #aaffcc 0%, #39ff14 100%);
        }
        .data-node-content::-webkit-scrollbar-corner, .data-node-iframe::-webkit-scrollbar-corner {
            background: #181818;
        }

        /* Command Menu Panel */
        .command-menu-panel {
            position: fixed;
            bottom: -100%;
            right: 2%;
            left: auto;
            width: 220px;
            height: auto;
            background-color: rgba(0, 0, 0, 0.9);
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            z-index: 100;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.15),
                        inset 0 0 10px rgba(255, 255, 255, 0.05);
            transition: bottom 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, right 0.5s, width 0.5s;
            transform: none;
        }

        .command-menu-panel.active {
            bottom: 2%;
            right: 2%;
        }

        .command-menu-panel.collapsed {
            bottom: -100%;
        }

        .command-menu-panel .panel-header {
            display: flex;
            justify-content: center; /* Center the title since there's no toggle button */
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .command-menu-panel .panel-title {
            color: #ffffff;
            font-size: 14px;
            font-family: 'Courier New', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
        }

        .command-menu-panel .command-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .command-menu-panel .command-button {
            background-color: rgba(0, 0, 0, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            padding: 8px 10px;
            color: #f0f0f0;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }

        .command-menu-panel .command-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-color: #ffffff;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
            text-shadow: 0 0 5px rgba(240, 240, 240, 0.5);
        }

        /* Mobile view */
        @media (max-width: 768px) {
            .command-menu-panel {
                width: 90%;
                max-width: 300px;
                right: 2%;
                left: auto;
            }
            .command-menu-panel.active {
                bottom: 2%;
                right: 2%;
            }
            .command-menu-panel.collapsed {
                bottom: -100%;
                right: 2%;
            }
        }

        /* Zeer kleine schermen */
        @media (max-width: 480px) {
            .command-menu-panel {
                width: 90%;
                max-width: 300px;
                right: 2%;
                left: auto;
            }
            .command-menu-panel.active {
                bottom: 2%;
                right: 2%;
            }
            .command-menu-panel.collapsed {
                bottom: -100%;
                right: 2%;
            }
        }

        /* Tablet and medium screens */
        @media (min-width: 769px) and (max-width: 1024px) {
            .command-menu-panel {
                width: 180px;
            }
            
            /* Verdwijn altijd naar beneden, niet naar links */
            .command-menu-panel.collapsed {
                bottom: -100%;
                left: auto;
            }
        }

        .command-menu-panel .command-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .command-menu-panel .terminal-line {
            color: #f0f0f0;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            line-height: 1.4;
            padding: 4px 0;
        }

        .command-menu-panel .prompt {
            color: #f0f0f0;
            margin-right: 5px;
        }

        .command-menu-panel .command-link {
            color: #f0f0f0;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .command-menu-panel .command-link:hover {
            color: #fff;
            text-shadow: 0 0 5px rgba(240, 240, 240, 0.5);
        }

        /* Verwijder oude command-button stijlen */
        /* .command-menu-panel .command-button {
            background-color: rgba(0, 0, 0, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            padding: 8px 10px;
            color: #f0f0f0;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }

        .command-menu-panel .command-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-color: #ffffff;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
            text-shadow: 0 0 5px rgba(240, 240, 240, 0.5);
        } */

        /* Animatie voor subtiele pulserende gloed */
        @keyframes subtleGlow {
            0% {
                filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
                box-shadow: 0 0 50px 5px rgba(255, 255, 255, 0.06);
            }
            100% {
                filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
                box-shadow: 0 0 70px 15px rgba(255, 255, 255, 0.1);
            }
        }

        /* Animatie voor masker schaal (gelijk aan logo-bg) */
        @keyframes maskScale {
            0% { 
                transform: translate(-50%, -50%) scale(0.9);
            }
            100% { 
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Animatie voor extra sterke gloed aan het einde van de vergroting */
        @keyframes finalGlow {
            0% {
                filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.25)) 
                        drop-shadow(0 0 30px rgba(0, 0, 0, 0.7));
            }
            20% { /* Piek na 1 seconde (20% van 5s) */
                filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5)) 
                        drop-shadow(0 0 40px rgba(0, 0, 0, 0.7));
            }
            100% {
                filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)) 
                        drop-shadow(0 0 35px rgba(0, 0, 0, 0.7));
            }
        }

        /* Extra schaduw rond het starfield om helderder sterren te dempen */
        .logo-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0; 
            bottom: 0;
            /* background: radial-gradient(circle at center 55%,  rgba(0,0,0,0.6) 20%,  rgba(0,0,0,0.3) 40%,  rgba(0,0,0,0) 70%); */
            z-index: 0; /* Onder het masker maar boven het starfield */
            pointer-events: none; /* Zorgt dat klikken door deze laag heen gaan */
        }

        /* We gebruiken een pseudo-element voor de gloed om het alleen op de cirkel toe te passen */
        .logo-container::after {
            content: '';
            position: absolute;
            top: 55%;
            left: 50%;
            /* Alle gloed en box-shadow verwijderd */
            opacity: 0 !important;
            pointer-events: none;
        }

        /* Duidelijkere fade-in animatie */
        @keyframes fadeInGlow {
            0% { 
                opacity: 0; 
                box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.1),
                            0 0 80px 30px rgba(0, 0, 0, 0.5);
            }
            30% { /* Begin langzaam */
                opacity: 0.2;
                box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.2),
                            0 0 90px 35px rgba(0, 0, 0, 0.6);
            }
            70% { /* Versnellen in het midden */
                opacity: 0.6;
                box-shadow: 0 0 50px 25px rgba(255, 255, 255, 0.3),
                            0 0 100px 40px rgba(0, 0, 0, 0.7);
            }
            100% { 
                opacity: 1; 
                box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.35),
                            0 0 120px 45px rgba(0, 0, 0, 0.8);
            }
        }

        /* Subtiele gloed animatie voor lichte variatie */
        @keyframes subtleGlow {
            0% {
                box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.35),
                            0 0 100px 40px rgba(0, 0, 0, 0.8);
            }
            100% {
                box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.4),
                            0 0 120px 50px rgba(0, 0, 0, 0.8);
            }
        }

        /* Animatie voor het pulserend effect wanneer de slang onder de gloed beweegt - subtieler gemaakt */
        @keyframes disturbedGlow {
            0% {
                box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.4),
                            0 0 120px 45px rgba(0, 0, 0, 0.8);
            }
            25% {
                box-shadow: 0 0 70px 32px rgba(255, 255, 255, 0.45),
                            0 0 140px 50px rgba(50, 50, 255, 0.08),
                            0 0 120px 45px rgba(0, 0, 0, 0.8);
            }
            50% {
                box-shadow: 0 0 65px 28px rgba(255, 255, 255, 0.35),
                            0 0 130px 48px rgba(50, 50, 255, 0.05),
                            0 0 120px 45px rgba(0, 0, 0, 0.8);
            }
            75% {
                box-shadow: 0 0 75px 35px rgba(255, 255, 255, 0.48),
                            0 0 145px 52px rgba(50, 50, 255, 0.1),
                            0 0 120px 45px rgba(0, 0, 0, 0.8);
            }
            100% {
                box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.4),
                            0 0 120px 45px rgba(0, 0, 0, 0.8);
            }
        }

        /* Class die toegevoegd wordt aan logo-container wanneer slang de gloed beïnvloedt */
        .logo-container.disturbed-glow::after {
            animation: 
                subtleGlow 8s ease-in-out infinite alternate 8s, /* Behoud de bestaande animatie */
                maskScale 15s cubic-bezier(0.01, 0.1, 0.2, 1) forwards 1.5s, /* Behoud de bestaande animatie */
                fadeInGlow 8s ease-in forwards 1.5s, /* Behoud de bestaande animatie */
                disturbedGlow 3.5s ease-in-out infinite !important; /* Nog tragere verstorende animatie */
        }

        /* Voeg toe aan de CSS */
        .command-link.disabled {
            pointer-events: none;
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Voeg CSS toe voor de rode disconnect-link (in de style tag, maar hier als JS voor eenvoud): */
        .command-link.disconnect { color: #ff5555 !important; font-weight: bold; }

        .flash-success {
            animation: flashSuccessPulse 1.1s ease-out;
        }
        @keyframes flashSuccessPulse {
            0% {
                color: #39ff14;
                text-shadow: 0 0 12px #39ff14, 0 0 24px #39ff14, 0 0 48px #39ff14;
            }
            60% {
                color: #39ff14;
                text-shadow: 0 0 24px #39ff14, 0 0 48px #39ff14, 0 0 64px #39ff14;
            }
            100% {
                color: #f0f0f0;
                text-shadow: none;
            }
        }

        .flash-disconnect {
            animation: flashDisconnectPulse 1.2s ease-out;
        }
        @keyframes flashDisconnectPulse {
            0% {
                color: #ff5555;
                text-shadow: 0 0 12px #ff5555, 0 0 24px #ff5555, 0 0 48px #ff5555;
            }
            60% {
                color: #ff5555;
                text-shadow: 0 0 24px #ff5555, 0 0 48px #ff5555, 0 0 64px #ff5555;
            }
            100% {
                color: #f0f0f0;
                text-shadow: none;
            }
        }

        .node-link {
          color: #fff;
          text-decoration: none;
          transition: text-shadow 0.2s, color 0.2s;
        }
        .node-link:hover {
          color: #39ff14;
          text-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14;
          text-decoration: none;
        }

        /* Terminal scrollbar stijl */
        .terminal-content, .terminal-section, #terminalContent, #terminalLines {
          scrollbar-width: thin;
          scrollbar-color: #bbb #181818;
        }
        .terminal-content::-webkit-scrollbar, .terminal-section::-webkit-scrollbar, #terminalContent::-webkit-scrollbar, #terminalLines::-webkit-scrollbar {
          width: 7px;
          background: #181818;
        }
        .terminal-content::-webkit-scrollbar-thumb, .terminal-section::-webkit-scrollbar-thumb, #terminalContent::-webkit-scrollbar-thumb, #terminalLines::-webkit-scrollbar-thumb {
          background: #bbb;
          border-radius: 4px;
        }
        .terminal-content::-webkit-scrollbar-corner, .terminal-section::-webkit-scrollbar-corner, #terminalContent::-webkit-scrollbar-corner, #terminalLines::-webkit-scrollbar-corner {
          background: #181818;
        }

        .fullscreen-btn {
          position: absolute;
          top: 18px;
          right: 18px;
          background: rgba(0,0,0,0.5);
          border: 1px solid #fff;
          color: #fff;
          font-size: 1.4rem;
          border-radius: 5px;
          padding: 6px 12px;
          cursor: pointer;
          z-index: 1100;
          transition: background 0.2s, color 0.2s, border 0.2s;
        }
        .fullscreen-btn:hover {
          background: #fff;
          color: #000;
          border: 1px solid #39ff14;
        }

        /* Scrollbar stijl voor de hele website/body */
        html, body {
          scrollbar-width: thin;
          scrollbar-color: #fff #000;
        }
        html::-webkit-scrollbar, body::-webkit-scrollbar {
          width: 10px;
          background: #000;
        }
        html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
          background: #fff;
          border-radius: 6px;
        }
        html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner {
          background: #000;
        }
        /* Verberg horizontale scrollbars waar mogelijk */
        body, html {
          overflow-x: hidden !important;
        }
    </style>
</head>
<body>
    <canvas id="starfieldCanvas"></canvas>
    <!-- Intro scherm met audio keuze -->
    <div class="intro-screen" id="introScreen">
        <div class="intro-title">GROZLAN</div>
        <div class="intro-text">
            Website intended to be experienced with audio and fullscreen. Up to you. 
        </div>
        <div class="intro-options">
            <button class="intro-button primary" id="withAudioBtn">START WITH AUDIO</button>
            <button class="intro-button" id="withoutAudioBtn">START WITHOUT AUDIO</button>
        </div>
    </div>

    <!-- Hoofdinhoud (aanvankelijk verborgen) -->
    <div id="mainContent">
        <div class="logo-container">
            <img src="grozlan-logo-bgbg.png?v=2" alt="GROZLAN mask" class="logo-mask" width="1000" height="1000">
            <img src="grozlan-logo-bg.png?v=2" alt="GROZLAN background" class="logo-bg" width="1000" height="1000">
            <img src="grozlan-logo-nobg.png?v=2" alt="GROZLAN foreground" class="logo-fg" width="1000" height="1000">
        </div>
        
        <div class="terminal-section">
            <div id="terminal-container">
                <span id="terminal-text"></span>
                <!-- Cursor wordt dynamisch toegevoegd door JS -->
            </div>
            <!-- Link wordt dynamisch toegevoegd door JS -->
        </div>
        
        <div class="audio-controls" id="audioControls">
            <span>AUDIO:</span>
            <button class="audio-button" id="audioToggle">▶</button> <!-- Initial state: Play -->
        </div>
    </div>
    
    <!-- Terminal Overlay -->
    <div class="terminal-overlay" id="terminalOverlay">
        <div class="terminal-header">
            <span class="terminal-title">Grozlan Terminal [Version 10.0.22635.4170]</span>
            <div>
                <a href="#" class="terminal-minimize" id="terminalMinimizeButton"></a>
                <a href="#" class="terminal-close" id="terminalCloseButton">&times;</a>
            </div>
        </div>
        <div class="terminal-content" id="terminalContent">
             <div id="terminalLines">
                 <!-- Alleen de promptregel blijft over, alle command-option regels zijn verwijderd -->
                 <div class="terminal-line current-input">
                     <span class="prompt">></span>&nbsp;<span class="input-area"></span><span class="terminal-cursor"></span>
                 </div>
             </div>
        </div>
    </div>

        <!-- Command Menu Panel -->
        <div class="command-menu-panel collapsed" id="commandMenuPanel">
            <div class="panel-header">
                <div class="panel-title">Commands</div>
            </div>
            <div class="command-list">
                <!-- Alleen 'connect to grozlan server' blijft over -->
                <div class="terminal-line">
                    <span class="prompt">></span>
                    <a href="#" class="command-link" data-command="connect to grozlan server">xa</a>
                </div>
            </div>
        </div>
    

        <div class="data-node-overlay" id="dataNodeOverlay">
            <div class="data-node-window">
              <div class="data-node-header">
                <span class="data-node-title" id="dataNodeTitle"></span>
                <span class="data-node-close" id="dataNodeClose">&times;</span>
              </div>
              <div class="data-node-content">
                <iframe class="data-node-iframe" id="dataNodeIframe"></iframe>
              </div>
            </div>
          </div>


    <!-- Audio Elements -->
    <audio id="backgroundAudio" loop>
        <source src="audio.mpeg" type="audio/mpeg">
        Uw browser ondersteunt het audio-element niet.
    </audio>
    <!-- <audio id="clickSound" src="KLIK.mp3" preload="auto"></audio> -->
    <audio id="beepSound" src="beep.mp3" preload="auto"></audio>
    <audio id="clickSound" src="KLIK.mp3" preload="auto"></audio>
    <audio id="terminalStartSound" src="start.mp3" preload="auto"></audio> 
    <audio id="terminalStopSound" src="stop.mp3" preload="auto"></audio>
    <audio id="terminalCloseBleep" src="close_bleep.mp3" preload="auto"></audio>
    <audio id="loadSound" src="load.mp3" preload="auto"></audio>
    <audio id="typingSound" src="typing.wav" preload="auto"></audio>
    <audio id="successSound" src="succes.mp3" preload="auto"></audio>
    <audio id="failedSound" src="failed.mp3" preload="auto"></audio>

    <script>

function fetchNodesFromServer(type, callback) {
  fetch(`/api/nodes/${type}`)
    .then(res => res.json())
    .then(nodes => {
      if (callback) callback(nodes);
    })
    .catch(err => {
      if (callback) callback([]);
    });
}


        // Starfield script (as before)
        const starfieldCanvas = document.getElementById('starfieldCanvas');
        const starfieldCtx = starfieldCanvas.getContext('2d');
        // Snake canvas context is verwijderd
        let starfieldParticles = [];

        function resizeStarfieldCanvas() {
            starfieldCanvas.width = window.innerWidth;
            starfieldCanvas.height = window.innerHeight;
            // Geen snakeCanvas meer om te resizen
            createStarfieldParticles();
            resetSnake(); // Reset slang bij window resize
        }

        // Detecteer of de slang dichtbij of onder de gloed is
        function isSnakeNearGlowCenter() {
            // Haal het middelpunt van het scherm op (waar de gloed zit)
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight * 0.48; // 48% van boven, waar de gloed is geplaatst
            
            // Afstand waarop we effecten willen triggeren - iets groter dan de gloed diameter
            const glowRadius = Math.min(window.innerWidth, window.innerHeight) * 0.2;
            
            // Check of enig deel van de slang binnen deze afstand is
            for (const point of snakePath) {
                const dx = point.x - centerX;
                const dy = point.y - centerY;
                const distSq = dx * dx + dy * dy;
                
                if (distSq < glowRadius * glowRadius) {
                    return true; // Slang is in de buurt van de gloed
                }
            }
            
            return false; // Slang is niet in de buurt
        }

        // Variabele om bij te houden of de slang recent in de buurt was
        let snakeNearGlow = false;
        // Variabele om de intensiteit van het effect bij te houden
        let glowDisturbanceIntensity = 0;
        
        // Update de gloed effect op basis van slang positie
        function updateGlowEffect() {
            const isNearNow = isSnakeNearGlowCenter();
            
            // Als de slang net in de buurt komt, begin een sterk effect
            if (isNearNow && !snakeNearGlow) {
                glowDisturbanceIntensity = 1.0; // Start met maximale intensiteit
                
                // Manipuleer de gloed met CSS animatie (door class toe te voegen)
                const logoContainer = document.querySelector('.logo-container');
                if (logoContainer) {
                    logoContainer.classList.add('disturbed-glow');
                }
            } 
            // Als de slang weggaat, begin herstel
            else if (!isNearNow && snakeNearGlow) {
                // Verwijder de verstoring class
                const logoContainer = document.querySelector('.logo-container');
                if (logoContainer) {
                    logoContainer.classList.remove('disturbed-glow');
                }
            }
            
            // Update de status
            snakeNearGlow = isNearNow;
            
            // Laat de intensiteit geleidelijk afnemen als de slang in de buurt blijft
            if (isNearNow && glowDisturbanceIntensity > 0.2) {
                glowDisturbanceIntensity *= 0.99; // Langzame afname
            }
        }

        // Teken de slang als een zwarte uitsparing die sterren bedekt
        function drawSnake() {
            if (snakePath.length < 2) return;
            starfieldCtx.save();

            const segmentCount = 50;
            const maxWidth = snakeThickness; // Maximaal zo dik als snakeThickness
            const minWidth = snakeThickness * 0.4; // Staart

            if (snakePath.length >= segmentCount) {
                for (let s = 0; s < segmentCount; s++) {
                    const i = Math.floor(s * (snakePath.length - 1) / (segmentCount - 1));
                    const progress = s / (segmentCount - 1); // 0 (kop) tot 1 (staart)
                    // Basisdikte van dik naar dun
                    let base = maxWidth - (maxWidth - minWidth) * progress;
                    // Sinusgolf voor golvend effect, amplitude max 30% van maxWidth
                    const wave = Math.sin(progress * Math.PI * 3 + time * 2) * (maxWidth * 0.3);
                    let width = base + wave;
                    // Clamp zodat nooit dikker dan maxWidth en nooit dunner dan minWidth
                    width = Math.max(minWidth, Math.min(maxWidth, width));
                    starfieldCtx.beginPath();
                    starfieldCtx.arc(snakePath[i].x, snakePath[i].y, width / 2.5, 0, Math.PI * 2);
                    starfieldCtx.fillStyle = 'rgba(0,0,0,1)'; // Zwarte slang
                    starfieldCtx.shadowBlur = 15;
                    starfieldCtx.shadowColor = 'rgba(0,0,0,0.7)';
                    starfieldCtx.fill();
                }
            }

            starfieldCtx.restore();
        }
        
        // Pas de animateStarfield functie aan
        function animateStarfield() { 
            // Maak de slang altijd volledig zichtbaar
            snakeFadeProgress = 1;
            // if (snakeFadeStartTime === null) snakeFadeStartTime = performance.now();
            // const now = performance.now();
            // snakeFadeProgress = Math.min(1, (now - snakeFadeStartTime) / SNAKE_FADE_DURATION);
            
            // Wis starfield canvas
            starfieldCtx.clearRect(0, 0, starfieldCanvas.width, starfieldCanvas.height);

            // --- PULSERENDE STER ACHTER MASKER ---
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight * 0.48;
            // Willekeurige puls-snelheid die langzaam verandert
            if (typeof window.pulseSpeed === 'undefined') window.pulseSpeed = 0.003;
            if (typeof window.pulseTargetSpeed === 'undefined') window.pulseTargetSpeed = 0.003;
            if (typeof window.pulsePhase === 'undefined') window.pulsePhase = Math.random() * Math.PI * 2;
            // Elke ~2-4 seconden een nieuwe random snelheid kiezen
            if (!window.lastPulseSpeedChange || performance.now() - window.lastPulseSpeedChange > 2000 + Math.random()*2000) {
                window.pulseTargetSpeed = 0.001 + Math.random() * 0.008; // 0.001 tot 0.009
                window.lastPulseSpeedChange = performance.now();
            }
            // Interpoleer langzaam naar de nieuwe snelheid
            window.pulseSpeed += (window.pulseTargetSpeed - window.pulseSpeed) * 0.02;
            window.pulsePhase += window.pulseSpeed;
            const pulse = 1 - 0.03 * (1 + Math.sin(window.pulsePhase)); // pulse: 1 → 0.97, zeer subtiel
            const starRadius = Math.min(window.innerWidth, window.innerHeight) * 0.34 * pulse;
            const gradient = starfieldCtx.createRadialGradient(centerX, centerY, 0, centerX, centerY, starRadius);
            gradient.addColorStop(0, 'rgba(255,255,255,0.95)');
            gradient.addColorStop(0.2, 'rgba(255,255,255,0.7)');
            gradient.addColorStop(0.5, 'rgba(255,255,255,0.25)');
            gradient.addColorStop(1, 'rgba(255,255,255,0)');
            starfieldCtx.save();
            starfieldCtx.globalCompositeOperation = 'lighter';
            starfieldCtx.beginPath();
            starfieldCtx.arc(centerX, centerY, starRadius, 0, Math.PI * 2);
            starfieldCtx.fillStyle = gradient;
            starfieldCtx.shadowColor = 'white';
            starfieldCtx.shadowBlur = 60 * pulse;
            starfieldCtx.fill();
            starfieldCtx.restore();
            // --- EINDE PULSERENDE STER ---

            updateSnake(); // Update de slang positie
            updateGlowEffect(); // Update het gloed-effect op basis van slang positie
            
            // Teken sterren op het starfield canvas
            starfieldParticles.forEach(particle => {
                particle.update();
                const { minDistSq, localWidth } = getMinDistSqToSnake(particle);
                particle.draw(minDistSq, localWidth);
            });
            
            // Teken de slang
            drawSnake();
            
            requestAnimationFrame(animateStarfield);
        }

        class StarfieldParticle { 
            constructor() {
                this.x = Math.random() * starfieldCanvas.width;
                this.y = Math.random() * starfieldCanvas.height;
                this.size = Math.random() * 1.5 + 0.5; 
                this.baseOpacity = Math.random() * 0.6 + 0.2; 
                this.naturalOpacity = this.baseOpacity; // For flickering calculation
                this.opacity = this.baseOpacity; // Current final opacity
                this.opacityDirection = Math.random() < 0.5 ? 1 : -1; 
                // Kleur: 85% wit, 10% lichtgeel, 5% rood
                const colorRand = Math.random();
                if (colorRand < 0.05) {
                    // Rood
                    this.color = 'rgba(255, 80, 80, ';
                } else if (colorRand < 0.15) {
                    // Lichtgeel
                    this.color = 'rgba(255, 255, 180, ';
                } else {
                    // Wit
                    this.color = 'rgba(255, 255, 255, ';
                }
                this.glow = this.size > 1.2; 
                // NIEUW: animatie voor glow-radius
                this.animatedGlowRadius = 0;
            }

            draw(minDistSq, localWidth) {
                const r = localWidth / 2.5; // Straal van de slangsegmenten (gelijk aan drawSnake)
                const d = Math.sqrt(minDistSq);
                const baseGlowAmount = this.glow ? 4 : 0;

                if (this.naturalOpacity < 0.01 && d > r) return;

                starfieldCtx.save();
                starfieldCtx.fillStyle = this.color + this.naturalOpacity + ')';
                if (this.glow && d > r) {
                    starfieldCtx.shadowBlur = baseGlowAmount;
                    starfieldCtx.shadowColor = 'rgba(255, 255, 255, 0.6)';
                } else {
                    starfieldCtx.shadowBlur = 0;
                }
                starfieldCtx.beginPath();
                starfieldCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                starfieldCtx.fill();
                starfieldCtx.shadowBlur = 0;

                // Gloed: alleen als ster onder de slang zit
                // NIEUW: laat de glow-radius langzaam meegroeien/krimpen
                let targetGlow = 0;
                if (d < r) {
                    targetGlow = r;
                }
                // Interpoleer animatedGlowRadius langzaam naar targetGlow
                const speed = 0.08; // Hoe lager, hoe langzamer (0.05-0.15 is mooi)
                this.animatedGlowRadius += (targetGlow - this.animatedGlowRadius) * speed;
                if (this.animatedGlowRadius < 0.1) this.animatedGlowRadius = 0; // Clamp

                if (this.animatedGlowRadius > 1) {
                    // Maak de gloed minder fel en kleiner
                    const glowRadius = this.animatedGlowRadius * 0.55; // 55% van origineel
                    const glowOpacity = 0.18; // Veel minder fel
                    const gradient = starfieldCtx.createRadialGradient(
                        this.x, this.y, this.size * 0.5,
                        this.x, this.y, glowRadius
                    );
                    gradient.addColorStop(0, `rgba(255, 255, 255, ${glowOpacity})`);
                    gradient.addColorStop(0.7, `rgba(200, 220, 255, ${glowOpacity * 0.4})`);
                    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
                    starfieldCtx.fillStyle = gradient;
                    starfieldCtx.beginPath();
                    starfieldCtx.arc(this.x, this.y, glowRadius, 0, Math.PI * 2);
                    starfieldCtx.fill();
                }
                starfieldCtx.restore();
            }

            update() {
                // Update natural flicker opacity
                this.naturalOpacity += this.opacityDirection * 0.003; 
                if (this.naturalOpacity > this.baseOpacity + 0.3 || this.naturalOpacity < this.baseOpacity - 0.1) {
                    this.opacityDirection *= -1;
                    this.naturalOpacity = Math.max(0.05, Math.min(this.baseOpacity + 0.3, this.naturalOpacity));
                }
            }
        }

        function createStarfieldParticles() {
            starfieldParticles = [];
            const densityFactor = 10000; // Decreased for more stars
            const particleCount = Math.floor((starfieldCanvas.width * starfieldCanvas.height) / densityFactor);
            for (let i = 0; i < particleCount; i++) {
                starfieldParticles.push(new StarfieldParticle());
            }
        }

        // --- Snake Variables ---
        const snakePath = [];
        const snakeMaxLength = 2500; // Nog langere slang
        const snakeThickness = 60;
        const snakeThicknessSquared = snakeThickness * snakeThickness;
        let time = 0;

        // Reset alle slang parameters - sterk versimpeld
        function resetSnake() {
            snakePath.length = 0;
            snakeStartX = Math.random() * window.innerWidth;
            snakeStartY = Math.random() * window.innerHeight;
            snakeDirection = Math.random() < 0.5 ? 1 : -1; // Willekeurige richting
            time = 0;
            for (let i = 0; i < 10; i++) {
                snakePath.push({ x: snakeStartX, y: snakeStartY });
            }
        }

        
        // --- Function to get minimum squared distance to snake ---
        function getMinDistSqToSnake(particle) {
            if (snakePath.length < 2) return { minDistSq: Infinity, localWidth: 0 };
            const starX = particle.x;
            const starY = particle.y;
            let minDistSq = Infinity;
            let localWidth = 0;
            // Zelfde segmentverdeling als in drawSnake
            const segmentCount = 50;
            // GEBRUIK DEZELFDE WAARDEN ALS IN drawSnake
            const maxWidth = snakeThickness;
            const minWidth = snakeThickness * 0.4;
            // Bereken voor elk segmentpunt de dikte
            const widths = [];
            for (let s = 0; s < segmentCount; s++) {
                const progress = s / (segmentCount - 1);
                let base = maxWidth - (maxWidth - minWidth) * progress;
                const wave = Math.sin(progress * Math.PI * 3 + time * 2) * (maxWidth * 0.3);
                let width = base + wave;
                width = Math.max(minWidth, Math.min(maxWidth, width));
                widths.push(width);
            }
            // Loop over lijnstukken tussen segmentpunten
            for (let s = 0; s < segmentCount - 1; s++) {
                const i0 = Math.floor(s * (snakePath.length - 1) / (segmentCount - 1));
                const i1 = Math.floor((s + 1) * (snakePath.length - 1) / (segmentCount - 1));
                const p0 = snakePath[i0];
                const p1 = snakePath[i1];
                // Projecteer ster op lijnstuk p0-p1
                const dx = p1.x - p0.x;
                const dy = p1.y - p0.y;
                const lenSq = dx * dx + dy * dy;
                let t = 0;
                if (lenSq > 0) {
                    t = ((starX - p0.x) * dx + (starY - p0.y) * dy) / lenSq;
                    t = Math.max(0, Math.min(1, t));
                }
                // Interpoleer positie en dikte
                const segX = p0.x + t * dx;
                const segY = p0.y + t * dy;
                const segWidth = widths[s] + t * (widths[s + 1] - widths[s]);
                const distSq = (starX - segX) * (starX - segX) + (starY - segY) * (starY - segY);
                if (distSq < minDistSq) {
                    minDistSq = distSq;
                    localWidth = segWidth;
                }
            }
            return { minDistSq, localWidth };
        }

        // Initialiseer de slang bij het laden
        resetSnake();

        window.addEventListener('resize', resizeStarfieldCanvas);
        resizeStarfieldCanvas(); 
        animateStarfield(); 

        // Functie om de slang te updaten - versimpeld
        function updateSnake() {
            time += 0.002;
            const width = window.innerWidth;
            const height = window.innerHeight;
            const radius = Math.min(width, height) * 0.3;
            const centerX = snakeStartX;
            const centerY = snakeStartY;
            const yOffset = Math.sin(time * 0.5 * snakeDirection) * radius * 0.5;
            const x = centerX + Math.sin(time * snakeDirection) * radius * 0.6;
            const y = centerY + Math.cos(time * 0.8 * snakeDirection) * radius * 0.5 + yOffset;
            snakePath.unshift({ x, y });
            while (snakePath.length > snakeMaxLength) {
                snakePath.pop();
            }
        }

        // Basisfuncties voor loadSound
        const loadSound = document.getElementById('loadSound');
        if (loadSound) loadSound.volume = 0.6;

        // Start het load-geluid met een willekeurige vertraging (0-2s)
        function startLoadSound() {
            if (!loadSound) return;
            if (loadSoundLoopActive) return; // Voorkom dubbele loops
            loadSoundLoopActive = true;
            // Wacht tot het audiobestand geladen is
            if (loadSound.readyState < 2) {
                loadSound.addEventListener('loadedmetadata', () => startLoadSound(), { once: true });
                return;
            }
            function playLoop() {
                if (!loadSoundLoopActive) return;
                loadSound.pause();
                // Kies een random starttijd in de mp3 (laatste halve seconde vermijden)
                const maxStart = Math.max(0, loadSound.duration - 0.5);
                const randomStart = Math.random() * maxStart;
                loadSound.currentTime = randomStart;
                loadSound.play().catch(e => console.error('Kan load.mp3 niet afspelen:', e));
            }
            loadSound.onended = function() {
                if (loadSoundLoopActive) playLoop();
            };
            playLoop();
        }

        function stopLoadSound() {
            if (!loadSound) return;
            loadSoundLoopActive = false;
            loadSound.pause();
            loadSound.currentTime = 0;
            loadSound.onended = null;
        }

        // Typing sound functie
        const typingSound = document.getElementById('typingSound');
        function playTypingSound() {if (!typingSound) return;typingSound.currentTime = 0;typingSound.play().catch(() => {});}
        function stopTypingSound() {if (typingSound) {typingSound.pause();typingSound.currentTime = 0;}}

        function createLoadingAnimation(baseText, duration = 1500, dotCount = 3, callback = null) {
            let dots = 0;
            const terminalLinesEl = document.getElementById('terminalLines');
            if (!terminalLinesEl) return null;
            // Kies een random duur tussen 1200 en 2500 ms
            const randomDuration = Math.floor(Math.random() * (2500 - 1200 + 1)) + 1200;
            duration = randomDuration;
            // Create loading line
            const loadingLine = document.createElement('div');
            loadingLine.className = 'terminal-line output loading-animation';
            terminalLinesEl.appendChild(loadingLine);
            // Initial text without dots
            loadingLine.textContent = baseText;
            // Scroll to bottom
            const terminalContent = document.getElementById('terminalContent');
            if (terminalContent) {
                terminalContent.scrollTop = terminalContent.scrollHeight;
            }
            // Start animation
            const interval = setInterval(() => {
                dots = (dots + 1) % (dotCount + 1);
                let dotsText = '';
                for (let i = 0; i < dots; i++) {
                    dotsText += '.';
                }
                loadingLine.textContent = baseText + dotsText;
                if (terminalContent) {
                    terminalContent.scrollTop = terminalContent.scrollHeight;
                }
            }, 500);
            setTimeout(() => {
                clearInterval(interval);
                loadingLine.textContent = baseText + '.'.repeat(dotCount);
                if (callback) {
                    callback(loadingLine);
                }
            }, duration);
            return {
                stop: () => {
                    clearInterval(interval);
                },
                update: (newText) => {
                    baseText = newText;
                }
            };
        }        

 
        document.addEventListener('DOMContentLoaded', function() {
            // --- Elements ---
            const introScreen = document.getElementById('introScreen');
            const mainContent = document.getElementById('mainContent');
            const withAudioBtn = document.getElementById('withAudioBtn');
            const withoutAudioBtn = document.getElementById('withoutAudioBtn');
            const audioControls = document.getElementById('audioControls');
            const audioToggle = document.getElementById('audioToggle');
            // Main Audio
            const backgroundAudio = document.getElementById('backgroundAudio');
            const beepAudio = document.getElementById('beepSound');
            // Terminal Audio
            const terminalStartAudio = document.getElementById('terminalStartSound');
            const terminalStopAudio = document.getElementById('terminalStopSound');
            const terminalCloseBleep = document.getElementById('terminalCloseBleep');
            // Terminal Elements
            const terminalOverlay = document.getElementById('terminalOverlay');
            const terminalCloseButton = document.getElementById('terminalCloseButton');
            const terminalMinimizeButton = document.getElementById('terminalMinimizeButton');
            const terminalHeader = document.querySelector('.terminal-header'); // For minimize restore
            // Note: terminalButton is added dynamically

            // --- State ---
            let audioChoiceMade = false;
            let playAudioGlobally = false;
            window.playAudioGlobally = playAudioGlobally;
            let isTerminalOpen = false;
            let isTerminalMinimized = false;
            let humStartTimer = null; // Timer for hum sound delay

            // --- Web Audio API Setup for Hum ---
            let audioContext = null;
            let humBuffer = null;
            let humSource = null; // Houdt de huidige actieve source node bij
            let humGainNode = null; // Voor volumeregeling
            const HUM_VOLUME = 0.2; // Standaard volume voor hum (was 0.1)

            function initAudioContext() {
                try {
                    window.AudioContext = window.AudioContext || window.webkitAudioContext;
                    audioContext = new AudioContext();
                    loadHumSound(); // Laad het geluid direct
                    console.log("AudioContext geïnitialiseerd.");
                } catch (e) {
                    console.error('Web Audio API wordt niet ondersteund in deze browser', e);
                    playAudioGlobally = false; // Schakel audio uit als API niet werkt
                }
            }

            async function loadHumSound() {
                if (!audioContext) return;
                try {
                    const response = await fetch('hum.mp3');
                    const arrayBuffer = await response.arrayBuffer();
                    audioContext.decodeAudioData(arrayBuffer, (buffer) => {
                        humBuffer = buffer;
                        console.log("hum.mp3 geladen en gedecodeerd.");
                        // Maak de gain node hier al aan
                        humGainNode = audioContext.createGain();
                        humGainNode.gain.setValueAtTime(HUM_VOLUME, audioContext.currentTime); // Beginvolume
                        humGainNode.connect(audioContext.destination); // Verbind met speakers
                    }, (e) => {
                        console.error('Fout bij decoderen hum.mp3:', e);
                    });
                } catch (e) {
                    console.error('Fout bij laden hum.mp3:', e);
                }
            }

            function startHumSound() {
                 if (!playAudioGlobally || !audioContext || !humBuffer || !humGainNode || humSource) return; // Alleen starten als alles klaar is en niet al speelt

                 // Maak een *nieuwe* source node elke keer als je start
                 humSource = audioContext.createBufferSource();
                 humSource.buffer = humBuffer;
                 humSource.loop = true; // Essentieel voor naadloos loopen
                 humSource.connect(humGainNode); // Verbind source met gain node
                 humSource.start(0); // Start direct
                 console.log("Hum sound gestart via Web Audio API");
            }

             function stopHumSound() {
                 if (humSource) {
                     humSource.stop(0); // Stop direct
                     humSource.disconnect(); // Verbreek verbinding
                     humSource = null; // Reset de source node
                     console.log("Hum sound gestopt via Web Audio API");
                 }
             }

             function setHumVolume(targetVolume, fadeDuration = 0) {
                if (!humGainNode || !audioContext) return;

                const now = audioContext.currentTime;
                humGainNode.gain.cancelScheduledValues(now); // Annuleer vorige fades

                if (fadeDuration > 0) {
                    // Lineaire fade naar het doelvolume
                    humGainNode.gain.linearRampToValueAtTime(targetVolume, now + fadeDuration / 1000);
                } else {
                    // Direct instellen
                    humGainNode.gain.setValueAtTime(targetVolume, now);
                }
                // console.log(`[Debug] Hum volume ingesteld op ${targetVolume} (fade: ${fadeDuration}ms)`);
            }

            // --- Audio Setup ---
            const NORMAL_VOLUME = 0.5;
            if (backgroundAudio) backgroundAudio.volume = NORMAL_VOLUME;
            if (beepAudio) beepAudio.volume = NORMAL_VOLUME;
            if (terminalStartAudio) terminalStartAudio.volume = 0.2;
            if (terminalStopAudio) terminalStopAudio.volume = 0.5;
            if (terminalCloseBleep) terminalCloseBleep.volume = NORMAL_VOLUME;

            // --- Functions ---

            function playSound(audioElement) {
                if (playAudioGlobally && audioElement && audioElement.readyState >= 2) {
                    try {
                        audioElement.currentTime = 0;
                        audioElement.play().catch(e => console.error(`Error playing ${audioElement.id}:`, e));
                    } catch (err) {
                        console.error(`Error with ${audioElement.id} playback:`, err);
                    }
                }
            }
            window.playSound = playSound;

            function stopSound(audioElement) {
                 if (audioElement) {
                     audioElement.pause();
                     audioElement.currentTime = 0;
                 }
            }
            window.stopSound = stopSound;

            function fadeInAudio(audioElement, targetVolume, duration = 500) {
                 if (!playAudioGlobally || !audioElement) return; 
                 
                 let currentVolume = audioElement.volume;
                 // Avoid fade if already at target volume
                 if (currentVolume === targetVolume) return;

                 const volumeStep = (targetVolume - currentVolume) / (duration / 50); 
                 const fadeInterval = setInterval(() => {
                     currentVolume += volumeStep;
                     if ((volumeStep > 0 && currentVolume >= targetVolume) || (volumeStep < 0 && currentVolume <= targetVolume)) {
                         clearInterval(fadeInterval);
                         audioElement.volume = targetVolume;
                         // console.log(`[Debug] ${audioElement.id} faded to ${targetVolume}`);
                     } else {
                        audioElement.volume = Math.max(0, Math.min(1, currentVolume));
                     }
                 }, 50);
             }
            window.fadeInAudio = fadeInAudio;

            function addBeepSoundListeners() {
                // Geen beep meer bij de startknoppen
            }

            function addMainContentClickListeners() {
                 const clickableElements = mainContent.querySelectorAll('button, a.server-link, .terminal-close, .terminal-minimize, .terminal-header'); 
                 clickableElements.forEach(element => {
                     element.removeEventListener('click', () => playSound(document.getElementById('beepSound'))); // Avoid duplicates
                     // Add listener only if it doesn't have a specific sound handler already
                     if (!element.id || (element.id !== 'audioToggle' && element.id !== 'terminalButton' && element.id !== 'terminalCloseButton' && element.id !== 'terminalMinimizeButton')) {
                       element.addEventListener('click', () => playSound(document.getElementById('beepSound')));
                     }
                 });
                 // Exclude audio toggle from generic click sound
                 if (audioToggle) audioToggle.removeEventListener('click', () => playSound(document.getElementById('beepSound'))); 
            }

            function openTerminal() {
                if (isTerminalOpen && !isTerminalMinimized) return; // Already open
                updateCommandMenu() 
                playSound(terminalStartAudio);
                setHumVolume(HUM_VOLUME); // Zorg dat hum volume correct is

                terminalOverlay.classList.remove('minimized');
                terminalOverlay.classList.add('active');
                isTerminalOpen = true;
                isTerminalMinimized = false;
                console.log("Terminal opened");
                
                // Toon het commandomenu wanneer de terminal opent
                const commandMenuPanel = document.getElementById('commandMenuPanel');
                if (commandMenuPanel) {
                    commandMenuPanel.classList.remove('collapsed');
                    commandMenuPanel.classList.add('active');
                }
                
                // Maak de terminal inhoud leeg
                const terminalLinesEl = document.getElementById('terminalLines');
                if (terminalLinesEl) {
                    terminalLinesEl.innerHTML = ''; 
                    
                    // Begin met een lege regel
                    const emptyLine = document.createElement('div');
                    emptyLine.className = 'terminal-line output';
                    emptyLine.textContent = ' '; 
                    terminalLinesEl.appendChild(emptyLine);
                    
                    // Toon "initializing..." na 1 seconde
                    setTimeout(() => {
                        // Toon "Initializing..." met typend effect
                        typeOutputLine('Initializing...', () => {
                            // Toon "done" na 1.5 seconde
                            setTimeout(() => {
                                typeOutputLine('Done.', () => {
                                    // Voeg extra witregels toe
                                    const emptyLine1 = document.createElement('div');
                                    emptyLine1.className = 'terminal-line output';
                                    emptyLine1.textContent = ' ';
                                    terminalLinesEl.appendChild(emptyLine1);
                                    
                                    const emptyLine2 = document.createElement('div');
                                    emptyLine2.className = 'terminal-line output';
                                    emptyLine2.textContent = ' ';
                                    terminalLinesEl.appendChild(emptyLine2);
                                    
                                    // Direct de nieuwe input regel maken, zonder welkomstbericht
                                    createNewInputLine();
                                });
                            }, 1500);
                        });
                    }, 1000);
                }

                // Start hum sound after a short delay using Web Audio API
                clearTimeout(humStartTimer); // Clear any existing timer
                humStartTimer = setTimeout(() => {
                     if (isTerminalOpen && !isTerminalMinimized) {
                        startHumSound(); // Start de hum sound
                     }
                }, 7560); // Teruggezet naar 7 seconden delay

                setCommandMenuEnabled(false); // Disable commando's tijdens opstarten
            }

            function closeTerminal() {
                stopLoadSound(); // Stop het load-geluid als de terminal wordt gesloten
                if (!isTerminalOpen) return; // Already closed
                stopSound(terminalStartAudio); // Stop het startgeluid onmiddellijk
                playSound(terminalStopAudio); // Speel stop geluid af
                stopHumSound(); // Stop hum immediately using Web Audio API
                clearTimeout(humStartTimer); // Prevent hum from starting if closed quickly

                terminalOverlay.classList.remove('active');
                terminalOverlay.classList.remove('minimized'); // Ensure minimized is also removed
                isTerminalOpen = false;
                isTerminalMinimized = false;
                console.log("Terminal closed");
                
                // Verberg ook het commandomenu wanneer de terminal sluit
                const commandMenuPanel = document.getElementById('commandMenuPanel');
                if (commandMenuPanel) {
                    commandMenuPanel.classList.remove('active');
                    commandMenuPanel.classList.add('collapsed');
                }
                isConnectedToServer = false;
                isUnsecureMode = false;
                // --- Toegevoegd: alle serververbindingen verbreken ---
                serverStatus.public = false;
                serverStatus.secured = false;
                updateCommandMenu();
            }

             function toggleMinimizeTerminal() {
                 playSound(document.getElementById('beepSound'));
                 if (!isTerminalOpen) return; // Cannot minimize if closed

                 if (isTerminalMinimized) {
                     // Restore
                     terminalOverlay.classList.remove('minimized');
                     terminalOverlay.classList.add('active');
                     setHumVolume(HUM_VOLUME, 500); // Fade hum volume in
                     startHumSound(); // Start de hum weer (als hij gestopt was)
                     isTerminalMinimized = false;
                     console.log("Terminal restored");
                     
                     // Toon ook het commandomenu weer wanneer de terminal wordt hersteld
                     const commandMenuPanel = document.getElementById('commandMenuPanel');
                     if (commandMenuPanel) {
                         commandMenuPanel.classList.remove('collapsed');
                         commandMenuPanel.classList.add('active');
                     }
                 } else {
                     // Minimize
                     terminalOverlay.classList.add('minimized');
                     terminalOverlay.classList.remove('active');
                     setHumVolume(0.05, 500); // Optie 2: Maak hum heel zacht bij minimaliseren (pas volume aan naar wens)
                     isTerminalMinimized = true;
                     console.log("Terminal minimized");
                     
                     // Verberg ook het commandomenu wanneer de terminal wordt geminimaliseerd
                     const commandMenuPanel = document.getElementById('commandMenuPanel');
                     if (commandMenuPanel) {
                         commandMenuPanel.classList.remove('active');
                         commandMenuPanel.classList.add('collapsed');
                     }
                 }
             }


            function startWebsite() {
                console.log("Starting website animations and terminal text...");
                const logoBg = document.querySelector('.logo-bg');
                const logoFg = document.querySelector('.logo-fg');
                const terminalSection = document.querySelector('.terminal-section');

                if (logoBg && logoFg) {
                    logoBg.classList.add('animate-bg');
                    logoFg.classList.add('animate-fg');
                } else {
                    console.error('Logo elements not found!');
                }

                setTimeout(() => {
                    if (terminalSection) {
                        terminalSection.classList.add('visible');
                        setTimeout(typeTerminalText, 500);
                    } else {
                         console.error("Terminal section not found inside timeout!");
                    }
                }, 8000); 
                 
                if (playAudioGlobally && audioControls) {
                    audioControls.classList.add('visible');
                }

                addMainContentClickListeners(); // Add listeners for main content now
            }

            function typeTerminalText() {
                const text = "> ACCESS TERMINAL";
                const terminalTextEl = document.getElementById('terminal-text');
                const terminalContainer = document.getElementById('terminal-container');
                
                if (!terminalTextEl || !terminalContainer) {
                    console.error("Terminal text element or container not found! Aborting typing.");
                    return; 
                }
                window.typeCommand = typeCommand;


                const terminalLink = document.createElement('a');
                terminalLink.href = "#"; 
                terminalLink.className = "server-link";
                terminalLink.id = "terminalButton"; // Assign ID for later reference
                // terminalLink.textContent = text; // Text content is set via typing
                
                const cursor = document.createElement('span');
                cursor.className = "cursor";

                terminalContainer.innerHTML = ''; 
                terminalContainer.appendChild(terminalTextEl); 
                terminalContainer.appendChild(cursor); 

                let index = 0;
                terminalTextEl.textContent = '';

                function typeLetter() {
                    if (index < text.length) {
                        terminalTextEl.textContent += text[index];
                        index++;
                        setTimeout(typeLetter, Math.random() * 100 + 50);
                    } else {
                        setTimeout(() => {
                            terminalContainer.innerHTML = '';
                            // Now create the actual link content
                            terminalLink.textContent = text;
                            terminalContainer.appendChild(terminalLink);
                            terminalContainer.appendChild(cursor);
                            terminalLink.classList.add('visible');
                            
                            // ****** CRITICAL: Add event listener HERE ******
                            terminalLink.addEventListener('click', (e) => {
                                e.preventDefault();
                                openTerminal(); 
                            });
                            // Add beep sound listener to the link
                            terminalLink.addEventListener('click', () => playSound(document.getElementById('beepSound'))); 

                        }, 500); 
                    }
                }
                typeLetter();
            }

            // fadeInAudio function (as before)

            function handleAudioChoice(playAudio) {
                if (audioChoiceMade) return; 
                audioChoiceMade = true;
                playAudioGlobally = playAudio;
                window.playAudioGlobally = playAudioGlobally;
                console.log(`Audio choice: ${playAudio ? 'With Audio' : 'Without Audio'}`);

                introScreen.style.opacity = '0';
                setTimeout(() => {
                    introScreen.style.display = 'none';
                    mainContent.style.display = 'flex'; 

                    startWebsite(); 
                    if (playAudioGlobally) { // Start context alleen als audio is toegestaan
                        initAudioContext(); // Initialiseer Web Audio API *nadat* gebruiker interactie heeft gehad
                        if (backgroundAudio) {
                            backgroundAudio.volume = 0; // Start stil
                            backgroundAudio.play().then(() => {
                                fadeAudio(backgroundAudio, NORMAL_VOLUME, 1000); // Fade in naar normaal volume
                                console.log("Background audio playing.");
                                if(audioToggle) audioToggle.textContent = '❚❚';
                            }).catch(error => {
                                console.error("Error playing background audio:", error);
                                if(audioToggle) audioToggle.textContent = '▶';
                            });
                            // Fade-in bij eerste herhaling
                            backgroundAudio.addEventListener('ended', function fadeInOnLoop() {
                                backgroundAudio.volume = 0;
                                fadeAudio(backgroundAudio, NORMAL_VOLUME, 1000);
                            }, { once: true });
                        }
                    } else {
                        if(audioToggle) audioToggle.textContent = '▶';
                    }
                }, 500); 
            }

            // --- Event Listeners ---
            if (withAudioBtn) {
                withAudioBtn.addEventListener('click', () => handleAudioChoice(true));
            }
            if (withoutAudioBtn) {
                withoutAudioBtn.addEventListener('click', () => handleAudioChoice(false));
            }

            if (audioToggle && backgroundAudio) {
                audioToggle.addEventListener('click', () => {
                    playSound(document.getElementById('beepSound')); 
                    if (backgroundAudio.paused) {
                        backgroundAudio.play().then(() => {
                             audioToggle.textContent = '❚❚';
                        }).catch(error => console.error("Error resuming audio:", error));
                    } else {
                        backgroundAudio.pause();
                        audioToggle.textContent = '▶';
                    }
                });
            }

            // Terminal Button Listeners
            if (terminalCloseButton) {
                terminalCloseButton.addEventListener('click', (e) => {
                     e.preventDefault();
                     closeTerminal();
                });
            }
            if (terminalMinimizeButton) {
                terminalMinimizeButton.addEventListener('click', (e) => {
                     e.preventDefault();
                     toggleMinimizeTerminal();
                });
            }
             // Add listener to restore terminal when clicking minimized header
             if (terminalHeader) {
                 terminalHeader.addEventListener('click', (e) => {
                     // Only restore if it's actually minimized and the click wasn't on a button inside it
                     if (isTerminalMinimized && !e.target.closest('a')) { 
                         toggleMinimizeTerminal(); 
                     }
                 });
             }

            // Add initial beep sound listeners for intro buttons
             addBeepSoundListeners();

             // Command handling
             const commandButtons = document.querySelectorAll('.command-button');
             const terminalContent = document.querySelector('.terminal-content');
          
    
          function showNodesInTerminal(nodes) {
  const terminalLinesEl = document.getElementById('terminalLines');
  if (!terminalLinesEl) return;

  typeOutputLine('Beschikbare HTML nodes:', () => {
    nodes.forEach(node => {
      // Toon als klikbare link met HTML rendering
      typeOutputLine(`- <a href="#" class="node-link" data-file="${node.file}" data-title="${node.id}">${node.id}</a>`, null, 10, true);
    });
    setTimeout(() => createNewInputLine(), 500);

    // Event listeners toevoegen NA het renderen (na typanimatie)
    setTimeout(() => {
      const links = document.querySelectorAll('.node-link');
      links.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          openNodeInIframe(this.getAttribute('data-file'), this.getAttribute('data-title'));
        });
      });
    }, 600); // Wacht tot alles getypt is
  });
}

// Functie om een node in de iframe overlay te openen
function openNodeInIframe(file, title) {
  // Speel klik- en beep-geluid af
  playSound(document.getElementById('clickSound'));
  playSound(document.getElementById('beepSound'));
  const overlay = document.getElementById('dataNodeOverlay');
  const iframe = document.getElementById('dataNodeIframe');
  const titleEl = document.getElementById('dataNodeTitle');
  if (!overlay || !iframe || !titleEl) return;

  // Controleer of er connectie is met de server
  if (!serverStatus.public && !serverStatus.secured) {
    // Geen verbinding: toon foutmelding in overlay
    iframe.src = 'about:blank';
    titleEl.textContent = title;
    overlay.style.display = 'flex';
    setTimeout(() => { overlay.style.opacity = '1'; }, 10);
    // Wacht tot iframe geladen is en toon foutmelding
    iframe.onload = function() {
      const doc = iframe.contentDocument || iframe.contentWindow.document;
      doc.open();
      doc.write('<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Connection lost</title><style>body{background:#0a0a0a;color:#ff5555;font-family:Courier New,monospace;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-size:1.3rem;text-align:center;} .err{background:rgba(0,0,0,0.7);padding:2em 2.5em;border-radius:8px;box-shadow:0 0 24px #000a;} .err strong{color:#fff;}</style></head><body><div class="err"><strong>Connection lost</strong><br>Please reconnect to the server to open this node.</div></body></html>');
      doc.close();
    };
    return;
  }

  // Verbinding actief: laad node
  iframe.src = file;
  titleEl.textContent = title;
  overlay.style.display = 'flex';
  setTimeout(() => { overlay.style.opacity = '1'; }, 10);
}

// Sluitknop event listener (eenmalig toevoegen)

  const closeBtn = document.getElementById('dataNodeClose');
  if (closeBtn) {
    closeBtn.addEventListener('click', function() {
      // Speel klik- en beep-geluid af
      playSound(document.getElementById('clickSound'));
      playSound(document.getElementById('beepSound'));
      const overlay = document.getElementById('dataNodeOverlay');
      const iframe = document.getElementById('dataNodeIframe');
      if (overlay && iframe) {
        overlay.style.opacity = '0';
        setTimeout(() => {
          overlay.style.display = 'none';
          iframe.src = '';
        }, 300);
      }
    });
  };

             // Functie om een commando te typen na de prompt
             function typeCommand(command, callback, speed = 40) {
                setCommandMenuEnabled(false);
                 const terminalLinesEl = document.getElementById('terminalLines');
                 if (!terminalLinesEl) {
                     console.error("typeCommand: terminalLinesEl niet gevonden!");
                     if (callback) callback();
                     return;
                 }
                 // Zoek de bestaande .current-input regel
                 const currentInputLine = terminalLinesEl.querySelector('.current-input');
                 if (!currentInputLine) {
                     console.error("typeCommand: geen .current-input gevonden!");
                     if (callback) callback();
                     return;
                 }
                 const inputArea = currentInputLine.querySelector('.input-area');
                 const cursor = currentInputLine.querySelector('.terminal-cursor');
                 if (!inputArea || !cursor) {
                     console.error("typeCommand: input-area of cursor niet gevonden!");
                     if (callback) callback();
                     return;
                 }
                 inputArea.textContent = ' ';
                 let index = 0;
                 playTypingSound();
                 function typeNext() {
                     if (index < command.length) {
                         inputArea.textContent += command[index];
                         index++;
                         let delay = Math.random() * 60 + 30;
                         const char = command[index - 1];
                         if (char === ' ' || char === ',' || char === '.' || char === ';' || char === ':') {
                             delay += 80 + Math.random() * 120;
                         }
                         const terminalContent = document.getElementById('terminalContent');
                         if (terminalContent) {
                             terminalContent.scrollTop = terminalContent.scrollHeight;
                         }
                         setTimeout(typeNext, delay);
                     } else {
                         stopTypingSound();
                         cursor.remove();
                         currentInputLine.classList.remove('current-input');
                         if (callback) callback();
                         // Commando direct uitvoeren na typen
                        
                         playSound(document.getElementById('clickSound'));
                         executeCommand(command);
                     }
                 }
                 typeNext();
                 
             }


             // Functie om een outputregel toe te voegen met een typend effect
           

             // Functie om een outputregel toe te voegen met een typend effect
             function typeOutputLine(text, callback, speed = 40, playLoadSound = false) {
                 const terminalLinesEl = document.getElementById('terminalLines');
                 if (!terminalLinesEl) {
                     console.error("typeOutputLine: terminalLinesEl niet gevonden!");
                     if (callback) callback();
                     return;
                 }
                 window.typeOutputLine = typeOutputLine;
                 const isCommand = text.includes(' - ');
                 const outputLine = document.createElement('div');
                 outputLine.className = 'terminal-line output typing';
                 if (isCommand) {
                     outputLine.className = 'terminal-line output typing command-option';
                     const promptSpan = document.createElement('span');
                     promptSpan.className = 'prompt';
                     promptSpan.textContent = '>';
                     outputLine.appendChild(promptSpan);
                     outputLine.appendChild(document.createTextNode(' '));
                 }
                 const textSpan = document.createElement('span');
                 textSpan.className = 'text-content';
                 const cursor = document.createElement('span');
                 cursor.className = 'terminal-cursor';
                 outputLine.appendChild(textSpan);
                 outputLine.appendChild(cursor);
                 terminalLinesEl.appendChild(outputLine);
                 const terminalContent = document.getElementById('terminalContent');
                 if (terminalContent) {
                     terminalContent.scrollTop = terminalContent.scrollHeight;
                 }
                 // Eerst cursor tonen, dan laadgeluid starten, dan na delay starten met woorden typen
                 if (playLoadSound && typeof startLoadSound === 'function') {
                     startLoadSound();
                 }
                 const words = text.split(' ');
                 let wordIndex = 0;
                 setTimeout(function typeNextWord() {
                     if (wordIndex < words.length) {
                         if (wordIndex > 0) textSpan.textContent += ' ';
                         textSpan.textContent += words[wordIndex];
                         wordIndex++;
                         if (terminalContent) {
                             terminalContent.scrollTop = terminalContent.scrollHeight;
                         }
                         const delay = 80 + Math.random() * 170;
                         setTimeout(typeNextWord, delay);
                     } else {
                         cursor.remove();
                         outputLine.classList.remove('typing');
                         if (isCommand) {
                             const commandText = text.substring(0, text.indexOf(' - '));
                             const description = text.substring(text.indexOf(' - ') + 3);
                             textSpan.remove();
                             const commandLink = document.createElement('a');
                             commandLink.href = '#';
                             commandLink.className = 'command-link';
                             commandLink.setAttribute('data-command', commandText);
                             commandLink.textContent = commandText;
                             outputLine.appendChild(commandLink);
                             outputLine.appendChild(document.createTextNode(' - ' + description));
                         }
                         if (callback) callback(outputLine);
                     }
                 }, 200); // 200ms delay vóór het eerste woord
             }

                     // Functie om meerdere regels achter elkaar te typen
                     function typeMultipleLines(lines, callback, speed = 20) {
                 if (lines.length === 0) {
                     if (callback) callback();
                     return;
                 }
                 
                 const line = lines.shift();
                 typeOutputLine(line, () => {
                     // Type de volgende regel na een korte pauze
                     setTimeout(() => {
                         typeMultipleLines(lines, callback, speed);
                     }, 50);
                 }, speed);
             }

            // Functie om een nieuwe invoerregel toe te voegen
            function createNewInputLine() {
                 stopLoadSound(); // Stop het load-geluid zodra terminal klaar is voor invoer
                 const terminalLinesEl = document.getElementById('terminalLines');
                 if (!terminalLinesEl) {
                     console.error("createNewInputLine: terminalLinesEl niet gevonden!");
                     return;
                 }
                 window.createNewInputLine = createNewInputLine;

                 // Voeg altijd een lege regel toe vóór de prompt
                 const emptyLine = document.createElement('div');
                 emptyLine.className = 'terminal-line output';
                 emptyLine.innerHTML = '&nbsp;'; // Non-breaking space voor zichtbare lege regel
                 terminalLinesEl.appendChild(emptyLine);

                 // Verwijder de huidige invoerregel als die bestaat
                 const currentInputLine = terminalLinesEl.querySelector('.current-input');
                 if (currentInputLine) {
                     currentInputLine.remove();
                 }

                 // Maak een nieuwe invoerregel
                 const newInputLine = document.createElement('div');
                 newInputLine.className = 'terminal-line current-input';

                 const promptSpan = document.createElement('span');
                 promptSpan.className = 'prompt';
                 promptSpan.textContent = '>';

                 const inputArea = document.createElement('span');
                 inputArea.className = 'input-area';
                 inputArea.textContent = ' ';

                 const cursor = document.createElement('span');
                 cursor.className = 'terminal-cursor';

                 newInputLine.appendChild(promptSpan);
                 newInputLine.appendChild(inputArea);
                 newInputLine.appendChild(cursor);

                 terminalLinesEl.appendChild(newInputLine);

                 // Scroll naar beneden
                 const terminalContent = document.getElementById('terminalContent');
                 if (terminalContent) {
                     terminalContent.scrollTop = terminalContent.scrollHeight;
                 }

                 setCommandMenuEnabled(true); // Enable commando's weer
             }

             
    // Centrale lijst met alle mogelijke commando's
    const COMMANDS = [
      {
        code: 1,
        label: 'Connect to {server}',
        description: '',
        showIf: (serverStatus, serverId) => !serverStatus[serverId],
        command: 'connect'
      },
      {
        code: 2,
        label: 'Disconnect from {server}',
        description: '',
        showIf: (serverStatus, serverId) => serverStatus[serverId],
        command: 'disconnect'
      },
      {
        code: 3,
        label: 'Get nodes from {server}',
        description: '',
        showIf: (serverStatus, serverId) => serverStatus[serverId],
        command: 'get-nodes'
      }
      // Voeg meer commando's toe indien gewenst
    ];

    const SERVERS = [
      {
        id: 'public',
        name: 'Grozlan Public Server',
        description: 'Publieke toegang tot GROZLAN'
      },
      {
        id: 'secured',
        name: 'Grozlan Secured Server',
        description: 'Beveiligde toegang tot GROZLAN'
      }
    ];

    let userHasSecureLink = false; // Globale status voor secure link
    let connectedServer = null; // null, 'public', of 'secured'

    // Initialiseer de status per server
    let serverStatus = {
      public: false,   // Niet verbonden met public server
      secured: false   // Niet verbonden met secured server
    };

    // Functie om de command menu te updaten
    function updateCommandMenu() {
      const commandList = document.querySelector('.command-list');
      if (!commandList) return;

      commandList.innerHTML = '';

      SERVERS.forEach(server => {
        COMMANDS.forEach(cmd => {
          if (typeof cmd.showIf === 'function' && !cmd.showIf(serverStatus, server.id)) return;
          // Vervang {server} in label door de echte servernaam
          const label = cmd.label.replace('{server}', server.name);
          // data-command attribuut voor afhandeling
          const dataCommand = cmd.command;
          const line = document.createElement('div');
          line.className = 'terminal-line';
          line.innerHTML = `
            <span class="prompt">></span>
            <a href="#" class="command-link${cmd.command === 'disconnect' ? ' disconnect' : ''}" data-command="${dataCommand}" data-server="${server.id}">
              ${label}
            </a>
            <span style="opacity:0.6; font-size:0.85em; margin-left:6px;">${cmd.description}</span>
          `;
          commandList.appendChild(line);
        });
      });

      // Voeg klikgeluid toe aan alle command-link knoppen
      const commandLinks = commandList.querySelectorAll('.command-link');
      commandLinks.forEach(link => {
        link.addEventListener('click', () => playSound(document.getElementById('beepSound')));
      });
    }


    function executeCommand(input) {
      // Parseer het commando en serverId
      const [command, serverId] = input.trim().split(' ');

      if (command === 'connect' && serverStatus.hasOwnProperty(serverId)) {
        setCommandMenuEnabled(false);
        createConnectAnimation(serverId, (success) => {
          stopLoadSound();
          if (success) {
            serverStatus[serverId] = true;
            updateCommandMenu();
            setCommandMenuEnabled(true);
            createNewInputLine();
            // ... overige connect-logica
          } else {
            // Bij denied: status blijft false, menu wordt wel geüpdatet
            updateCommandMenu();
            setCommandMenuEnabled(true);
            // createNewInputLine wordt al aangeroepen in createConnectAnimation
          }
        });
      } else if (command === 'disconnect' && serverStatus.hasOwnProperty(serverId)) {
        setCommandMenuEnabled(false);
        // startLoadSound(); // Verwijderd, zit nu in createDisconnectAnimation
        createDisconnectAnimation(serverId, () => {
          stopLoadSound(); // Stop laadgeluid als disconnectie klaar is
          serverStatus[serverId] = false;
          updateCommandMenu();
          setCommandMenuEnabled(true);
          createNewInputLine(); // Nieuwe inputregel na disconnect
          // ... overige disconnect-logica
        });
      } else if (command === 'get-nodes' && serverStatus.hasOwnProperty(serverId) && serverStatus[serverId]) {
        // Alleen uitvoeren als verbonden met de server
        startLoadSound();
        setCommandMenuEnabled(false);
        fetchNodesFromServer(serverId, nodes => {
          animateHtmlLinksInTerminal(nodes, () => {
            stopLoadSound();
            setCommandMenuEnabled(true);
            setTimeout(createNewInputLine, 500);
          });
        });
      } else {
        // Onbekend of niet correct commando (zou niet moeten gebeuren, fallback)
        typeOutputLine(`Fout: onbekend commando '${command}'`, () => {
            createNewInputLine();
        });
      }
      // ... andere commando's
    }


    function setCommandMenuEnabled(enabled) {
      const commandLinks = document.querySelectorAll('.command-link');
      commandLinks.forEach(link => {
        if (enabled) {
          link.classList.remove('disabled');
          link.setAttribute('tabindex', '0');
        } else {
          link.classList.add('disabled');
          link.setAttribute('tabindex', '-1');
        }
      });
    }

    // --- Connectie-animatie functie ---
    function createConnectAnimation(serverId, callback) {
      startLoadSound(); // Start laadgeluid direct
      const server = SERVERS.find(s => s.id === serverId);
      const serverName = server ? server.name : serverId;
      setTimeout(() => {
        typeOutputLine(`Establishing connection to ${serverName}`, () => {
          setTimeout(() => {
            // Check of secure link vereist is
            let denied = false;
            if (serverId === 'secured' && !userHasSecureLink) {
              denied = true;
            }
            const loading = createLoadingAnimation('', 1800, 3, () => {
              const terminalLinesEl = document.getElementById('terminalLines');
              if (terminalLinesEl) {
                const lastLine = terminalLinesEl.querySelector('.loading-animation:last-of-type');
                if (lastLine) {
                  if (denied) {
                    // Fade-out, vervang tekst, fade-in voor denied
                    lastLine.style.transition = 'opacity 0.3s';
                    lastLine.style.opacity = 0;
                    setTimeout(() => {
                      lastLine.textContent = 'Connection denied';
                      lastLine.classList.remove('loading-animation');
                      lastLine.classList.add('flash-disconnect');
                      playFailedSound();
                      stopLoadSound();
                      lastLine.style.opacity = 1;
                      setTimeout(() => {
                        if (callback) callback(false);
                        createNewInputLine();
                      }, 300);
                    }, 300);
                    return;
                  } else {
                    // Fade-out, vervang tekst, fade-in voor success
                    lastLine.style.transition = 'opacity 0.3s';
                    lastLine.style.opacity = 0;
                    setTimeout(() => {
                      lastLine.textContent = 'Connection established';
                      lastLine.classList.remove('loading-animation');
                      lastLine.classList.add('flash-success');
                      playSuccessSound();
                      lastLine.style.opacity = 1;
                      if (callback) callback(true);
                    }, 300);
                    return;
                  }
                }
              }
              if (callback) callback(!denied);
            });
          }, 400); // 400ms vertraging voor de laadanimatie
        });
      }, 1000); // 1000ms vertraging voor de establishing connection tekst
    }

    // --- Disconnectie-animatie functie ---
    function createDisconnectAnimation(serverId, callback) {
      startLoadSound(); // Start laadgeluid direct
      const server = SERVERS.find(s => s.id === serverId);
      const serverName = server ? server.name : serverId;
      setTimeout(() => {
        typeOutputLine(`Disconnecting from ${serverName}`, () => {
          setTimeout(() => {
            const loading = createLoadingAnimation('', 1400, 3, () => {
              // Vervang de laadregel door 'Disconnected'
              const terminalLinesEl = document.getElementById('terminalLines');
              if (terminalLinesEl) {
                const lastLine = terminalLinesEl.querySelector('.loading-animation:last-of-type');
                if (lastLine) {
                  // Fade-out, vervang tekst, fade-in voor disconnect
                  lastLine.style.transition = 'opacity 0.3s';
                  lastLine.style.opacity = 0;
                  setTimeout(() => {
                    lastLine.textContent = 'Disconnected';
                    lastLine.classList.remove('loading-animation');
                    lastLine.classList.add('flash-success');
                    playSuccessSound();
                    lastLine.style.opacity = 1;
                    if (callback) callback();
                  }, 300);
                  return;
                }
              }
              if (callback) callback();
            });
          }, 400); // 400ms vertraging voor de laadanimatie
        });
      }, 1000); // 1000ms vertraging voor de disconnecting tekst
    }

    // Nieuwe functie voor animatie van HTML links in de terminal
    function animateHtmlLinksInTerminal(_, callback) {
      const terminalLinesEl = document.getElementById('terminalLines');
      if (!terminalLinesEl) return;

      // Altijd deze node tonen, ongeacht input
      const nodes = [
        { id: '@Acces point 30-04.html', file: 'public_nodes/Acces point 30-04.html' }
      ];

      typeOutputLine('Getting nodes', () => {
        setTimeout(() => {
          typeOutputLine('Available HTML nodes:', () => {
            if (terminalLinesEl) {
              const emptyLine = document.createElement('div');
              emptyLine.className = 'terminal-line output';
              emptyLine.innerHTML = '&nbsp;';
              terminalLinesEl.appendChild(emptyLine);
            }
            let completed = 0;
            let nodeLines = [];
            nodes.forEach((node, idx) => {
              const initialDelay = Math.random() * 700;
              setTimeout(() => {
                const loading = createLoadingAnimation('- Connecting to node', undefined, 3, (thisLine) => {
                  nodeLines.push(thisLine);
                  if (!thisLine) return;
                  thisLine.style.transition = 'opacity 0.3s';
                  thisLine.style.opacity = 0;
                  setTimeout(() => {
                    thisLine.innerHTML = `- <a href=\"${node.file}\" class=\"node-link\" data-title=\"${node.id}\" target=\"_blank\">${node.id}</a>`;
                    thisLine.style.opacity = 1;
                    completed++;
                    if (completed === nodes.length) {
                      if (callback) callback();
                    }
                  }, 300);
                });
              }, initialDelay);
            });
            const terminalContent = document.getElementById('terminalContent');
            if (terminalContent) {
              terminalContent.scrollTop = terminalContent.scrollHeight;
            }
          }, 120);
        }, 200);
      }, 120);
    }

    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('command-link')) {
        e.preventDefault();
        const command = e.target.getAttribute('data-command');
        const serverId = e.target.getAttribute('data-server');
        if (command === 'get-nodes') {
          typeCommand('get-nodes ' + serverId);
          return;
        }
        // Voor connect/disconnect
        typeCommand(`${command} ${serverId}`);
      }
    });

    // ... bestaande code ...
    // Globale functie om een foutmelding in de terminal te tonen
    function showTerminalError(message) {
      const terminalLinesEl = document.getElementById('terminalLines');
      if (terminalLinesEl) {
        const errorLine = document.createElement('div');
        errorLine.className = 'terminal-line output flash-disconnect';
        errorLine.textContent = 'ERROR: ' + message;
        terminalLinesEl.appendChild(errorLine);
        // Scroll naar beneden
        const terminalContent = document.getElementById('terminalContent');
        if (terminalContent) {
          terminalContent.scrollTop = terminalContent.scrollHeight;
        }
        errorLine.classList.add('flash-disconnect');
        playFailedSound();
      } else {
        // Fallback: alert als terminal niet zichtbaar is
        alert('ERROR: ' + message);
      }
    }

    // Globale error handler voor JS errors
    window.onerror = function(message, source, lineno, colno, error) {
      showTerminalError(message + ' (regel ' + lineno + ')');
      // Return false zodat de browser de error ook in de console toont
      return false;
    };
    // ... bestaande code ...

    // Functie om flash-effecten te voorzien van geluid
    function playFlashSoundForLine(line) {
      if (line.classList.contains('flash-success')) {
        const audio = document.getElementById('successSound');
        if (audio) { audio.currentTime = 0; audio.play().catch(() => {}); }
      } else if (line.classList.contains('flash-disconnect')) {
        const audio = document.getElementById('failedSound');
        if (audio) { audio.currentTime = 0; audio.play().catch(() => {}); }
      }
    }

    // Hook in bij het toevoegen van flash-success of flash-disconnect
    // Patch typeOutputLine zodat geluid wordt afgespeeld als de klasse wordt toegevoegd
    const origTypeOutputLine = window.typeOutputLine || typeOutputLine;
    

    // ... bestaande code ...
    // Voeg deze hulpfunctie toe bovenin je script:
    function playSuccessSound() {
      const audio = document.getElementById('successSound');
      if (audio) { audio.currentTime = 0; audio.play().catch(() => {}); }
    }
    function playFailedSound() {
      const audio = document.getElementById('failedSound');
      if (audio) { audio.currentTime = 0; audio.play().catch(() => {}); }
    }
    // ... bestaande code ...

    // ... bestaande code ...
    // Fade-functie voor audio
    function fadeAudio(audio, targetVolume, duration = 1000) {
      if (!audio) return;
      const stepTime = 50;
      const steps = Math.ceil(duration / stepTime);
      const startVolume = audio.volume;
      const volumeStep = (targetVolume - startVolume) / steps;
      let currentStep = 0;
      const fadeInterval = setInterval(() => {
        currentStep++;
        audio.volume = Math.max(0, Math.min(1, startVolume + volumeStep * currentStep));
        if (currentStep >= steps) {
          audio.volume = targetVolume;
          clearInterval(fadeInterval);
        }
      }, stepTime);
    }
    // ... bestaande code ...
    // In handleAudioChoice, fade-in bij starten van achtergrondmuziek
    function handleAudioChoice(playAudio) {
      if (audioChoiceMade) return; 
      audioChoiceMade = true;
      playAudioGlobally = playAudio;
      window.playAudioGlobally = playAudioGlobally;
      console.log(`Audio choice: ${playAudio ? 'With Audio' : 'Without Audio'}`);

      introScreen.style.opacity = '0';
      setTimeout(() => {
        introScreen.style.display = 'none';
        mainContent.style.display = 'flex'; 

        startWebsite(); 
        if (playAudioGlobally) { // Start context alleen als audio is toegestaan
          initAudioContext(); // Initialiseer Web Audio API *nadat* gebruiker interactie heeft gehad
          if (backgroundAudio) {
            backgroundAudio.volume = 0; // Start stil
            backgroundAudio.play().then(() => {
              fadeAudio(backgroundAudio, NORMAL_VOLUME, 1000); // Fade in naar normaal volume
              console.log("Background audio playing.");
              if(audioToggle) audioToggle.textContent = '❚❚';
            }).catch(error => {
              console.error("Error playing background audio:", error);
              if(audioToggle) audioToggle.textContent = '▶';
            });
            // Fade-in bij eerste herhaling
            backgroundAudio.addEventListener('ended', function fadeInOnLoop() {
              backgroundAudio.volume = 0;
              fadeAudio(backgroundAudio, NORMAL_VOLUME, 1000);
            }, { once: true });
          }
        } else {
          if(audioToggle) audioToggle.textContent = '▶';
        }
      }, 500); 
    }
    // ... bestaande code ...
    // Fade-out achtergrondmuziek bij terminalStartAudio
    // if (terminalStartAudio && backgroundAudio) {
    //   terminalStartAudio.addEventListener('play', () => {
    //     fadeAudio(backgroundAudio, 0, 1000); // Fade out in 1 seconde
    //   });
    //   terminalStartAudio.addEventListener('ended', () => {
    //     fadeAudio(backgroundAudio, NORMAL_VOLUME, 1000); // Fade in na terminal start
    //   });
    // }
    // ... bestaande code ...

    // ... bestaande code ...
    const successSound = document.getElementById('successSound');
    if (successSound) successSound.volume = 0.8;
    const failedSound = document.getElementById('failedSound');
    if (failedSound) failedSound.volume = 0.8;
    // ... bestaande code ...

    // --- EINDE PULSERENDE STER ---
    // --- PLANETEN TOEVOEGEN ---
    // Oude planeet-code verwijderen:
    // (Zoek naar blokken met starfieldCtx.arc(mars.x, ...) en starfieldCtx.arc(earth.x, ...), inclusief oude earthGradient)
    // ... bestaande code ...
    // --- PLANETEN MET ORBIT EN SCHADUW ---
    // Parameters voor de orbit
    const orbitY = window.innerHeight * 0.82; // net boven de horizon
    const orbitRadius = window.innerWidth * 0.38; // grote boog
    const sunX = window.innerWidth / 2;
    const sunY = window.innerHeight * 0.48; // de grote ster als "zon"
    // Tijd voor animatie
    if (typeof window.planetOrbitTime === 'undefined') window.planetOrbitTime = Math.random() * Math.PI * 2;
    window.planetOrbitTime += 0.00018 * (window.innerWidth / 1200); // snelheid afhankelijk van schermbreedte
    // Mars parameters
    const marsAngle = Math.PI + window.planetOrbitTime * 1.1; // Mars iets achter Aarde
    const marsX = sunX + Math.cos(marsAngle) * orbitRadius;
    const marsY = orbitY + Math.sin(marsAngle) * orbitRadius * 0.08; // lichte boog
    const marsRadius = 22;
    // Aarde parameters
    const earthAngle = Math.PI + window.planetOrbitTime * 1.35; // Aarde "voorop"
    const earthX = sunX + Math.cos(earthAngle) * orbitRadius;
    const earthY = orbitY + Math.sin(earthAngle) * orbitRadius * 0.08;
    const earthRadius = 28;
    // Mars tekenen
    starfieldCtx.save();
    starfieldCtx.beginPath();
    starfieldCtx.arc(marsX, marsY, marsRadius, 0, Math.PI * 2);
    starfieldCtx.fillStyle = 'rgba(220, 80, 60, 1)';
    starfieldCtx.shadowColor = 'rgba(255, 100, 80, 0.7)';
    starfieldCtx.shadowBlur = 22;
    starfieldCtx.fill();
    // Schaduw op Mars
    const marsToSunAngle = Math.atan2(sunY - marsY, sunX - marsX);
    starfieldCtx.globalCompositeOperation = 'source-atop';
    starfieldCtx.beginPath();
    starfieldCtx.arc(marsX, marsY, marsRadius, marsToSunAngle + Math.PI * 0.25, marsToSunAngle + Math.PI * 1.25);
    starfieldCtx.lineTo(marsX, marsY);
    starfieldCtx.closePath();
    starfieldCtx.fillStyle = 'rgba(0,0,0,0.45)';
    starfieldCtx.fill();
    starfieldCtx.globalCompositeOperation = 'source-over';
    starfieldCtx.restore();
    // Aarde tekenen
    starfieldCtx.save();
    starfieldCtx.beginPath();
    starfieldCtx.arc(earthX, earthY, earthRadius, 0, Math.PI * 2);
    const earthGradient = starfieldCtx.createRadialGradient(earthX, earthY, 2, earthX, earthY, earthRadius);
    earthGradient.addColorStop(0, 'rgba(120,200,255,1)');
    earthGradient.addColorStop(0.5, 'rgba(60,180,120,1)');
    earthGradient.addColorStop(0.9, 'rgba(255,255,255,0.7)');
    earthGradient.addColorStop(1, 'rgba(255,255,255,0.2)');
    starfieldCtx.fillStyle = earthGradient;
    starfieldCtx.shadowColor = 'rgba(120,200,255,0.7)';
    starfieldCtx.shadowBlur = 22;
    starfieldCtx.fill();
    // Schaduw op Aarde
    const earthToSunAngle = Math.atan2(sunY - earthY, sunX - earthX);
    starfieldCtx.globalCompositeOperation = 'source-atop';
    starfieldCtx.beginPath();
    starfieldCtx.arc(earthX, earthY, earthRadius, earthToSunAngle + Math.PI * 0.25, earthToSunAngle + Math.PI * 1.25);
    starfieldCtx.lineTo(earthX, earthY);
    starfieldCtx.closePath();
    starfieldCtx.fillStyle = 'rgba(0,0,0,0.38)';
    starfieldCtx.fill();
    starfieldCtx.globalCompositeOperation = 'source-over';
    starfieldCtx.restore();
    // --- EINDE PLANETEN ---
});
    </script>


</body>
</html>