/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
      --retro-blue: #0099ff;
      --retro-glow-blue: #00aaff;
      --retro-orange: #ff8800;
      --xp-gray: #ece9d8;
      --xp-dark-blue-header-start: #0a0099;
      --main-gradient-start: #dbd9d9;
      --main-gradient-end: #726f6f;
      --border-light: #69758d;
      --shadow-light: rgba(0, 0, 0, 0.1);
      --icon-fill: #ffffff;
      --dark-bg-button: #0a0a0a;
      --dark-bg-box-body: rgba(8, 10, 18, 0.85);
      --neon-green: #a1b7ff;
      --auto-rotation: running;
    }

  * {
  cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto !important;
}


    body {
      background: -o-radial-gradient(center, ellipse, #101013 0%, #0a0a0c 100%);
      background: radial-gradient(ellipse at center, #101013 0%, #0a0a0c 100%);
      background-size: 100% 100%;
      color: var(--xp-gray);
      font-family: 'Audiowide', sans-serif;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      min-height: 100vh;
      margin: 0;
      overflow: hidden;
      position: relative;
    }





.raindrop {
    position: absolute;
    bottom: 100%;
    width: 2px;
    height: 40px; /* Beispielhöhe, wird im JS überschrieben */
    background: linear-gradient(to right, rgba(180, 200, 220, 0.1), rgba(200, 220, 240, 0.7));
    border-radius: 0% 0% 20% 20% / 0% 0% 20% 20%;
    animation: fall linear infinite;
    opacity: 0;
}

    /* Pseudo-Element für den "Kopf" des Tropfens, etwas heller */
    .raindrop::before {
        content: '';
        position: absolute;
        bottom: -2px; /* Positioniert den Kopf am unteren Ende der Linie */
        left: -1px; /* Zentriert über der Spur */
        width: 4px;
        height: 4px;
        background-color: rgba(220, 230, 250, 0.8);
        border-radius: 50%;
    }


@keyframes fall {
    0% {
        transform: translateY(0vh);
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh); /* Fällt bis knapp unterhalb des sichtbaren Bereichs */
        opacity: 0;
    }
}


#backgroundVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
  /* Du kannst hier filter behalten, wenn gewünscht – sonst entfernen */
  -webkit-filter: blur(8px) brightness(1) contrast(1.1) saturate(1.2);
          filter: blur(8px) brightness(1) contrast(1.1) saturate(1.2);
}

/* Canvas mit Partikeln – direkt über dem Video */


    #startScreen {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.97);
      -webkit-backdrop-filter: blur(12px);
              backdrop-filter: blur(12px);
      z-index: 10000;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-transition: opacity 0.8s ease, visibility 0.8s ease;
      -o-transition: opacity 0.8s ease, visibility 0.8s ease;
      transition: opacity 0.8s ease, visibility 0.8s ease;
      visibility: visible;
      opacity: 1;
    }

    #startScreen.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .startText {
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(16px, 4vw, 26px);
      color: var(--neon-green);
      text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green), 0 0 20px var(--neon-green), 0 0 30px var(--retro-blue);
      -webkit-animation: blink 1.2s infinite alternate, neonPulse 2s infinite alternate;
              animation: blink 1.2s infinite alternate, neonPulse 2s infinite alternate;
      text-align: center;
      padding: 20px;
    }

    @-webkit-keyframes blink {
      from { opacity: 1; text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green), 0 0 20px var(--neon-green), 0 0 30px var(--retro-blue); }
      to { opacity: 0.6; text-shadow: 0 0 5px var(--neon-green), 0 0 8px var(--neon-green); }
    }

    @keyframes blink {
      from { opacity: 1; text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green), 0 0 20px var(--neon-green), 0 0 30px var(--retro-blue); }
      to { opacity: 0.6; text-shadow: 0 0 5px var(--neon-green), 0 0 8px var(--neon-green); }
    }

    @-webkit-keyframes neonPulse {
      from { text-shadow: 0 0 4px #fff, 0 0 10px var(--neon-green), 0 0 15px var(--neon-green), 0 0 20px var(--neon-green), 0 0 25px var(--retro-blue); }
      to { text-shadow: 0 0 7px #fff, 0 0 15px var(--retro-blue), 0 0 25px var(--retro-blue), 0 0 35px var(--retro-blue), 0 0 45px var(--neon-green); }
    }

    @keyframes neonPulse {
      from { text-shadow: 0 0 4px #fff, 0 0 10px var(--neon-green), 0 0 15px var(--neon-green), 0 0 20px var(--neon-green), 0 0 25px var(--retro-blue); }
      to { text-shadow: 0 0 7px #fff, 0 0 15px var(--retro-blue), 0 0 25px var(--retro-blue), 0 0 35px var(--retro-blue), 0 0 45px var(--neon-green); }
    }


    #particleContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-animation: flyOut 0.8s ease-out forwards;
          animation: flyOut 0.8s ease-out forwards;

  background-image: -o-radial-gradient(circle, 
    rgba(0, 0, 0, 0.9) 0%,      /* innen: tiefschwarz */
    rgba(0, 120, 255, 0.6) 40%, /* mittelblau */
    rgba(0, 150, 255, 0.2) 80%, /* außen heller */
    rgba(0, 150, 255, 0) 100%   /* voll transparent außen */
  );

  background-image: radial-gradient(circle, 
    rgba(0, 0, 0, 0.9) 0%,      /* innen: tiefschwarz */
    rgba(0, 120, 255, 0.6) 40%, /* mittelblau */
    rgba(0, 150, 255, 0.2) 80%, /* außen heller */
    rgba(0, 150, 255, 0) 100%   /* voll transparent außen */
  );

  -webkit-box-shadow: 0 0 8px rgba(0, 150, 255, 0.5);

          box-shadow: 0 0 8px rgba(0, 150, 255, 0.5);
}


@-webkit-keyframes flyOut {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(var(--dx), var(--dy)) scale(0.3);
            transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}


@keyframes flyOut {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(var(--dx), var(--dy)) scale(0.3);
            transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}


    /* Main Box */
   #main-box {
  width: 90%;
  max-width: 650px;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  will-change: transform, box-shadow;

  /* box-shadow! */
      -webkit-box-shadow:
       0 8px 15px rgba(0, 136, 255, 0.2),
    inset 0 0 6px rgba(0, 0, 0, 0.3); /* weniger intensiver */

   box-shadow:
    0 8px 15px rgba(0, 136, 255, 0.2),
    inset 0 0 6px rgba(0, 0, 0, 0.3); /* weniger intensiver */


  border: 1.2px solid var(--retro-blue);
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 5;
  font-family: 'Fira Code', monospace;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  margin: 20px 0;

  /* Animation */
  -webkit-transition: -webkit-transform 0.15s ease-out, -webkit-box-shadow 0.2s ease-out;
  transition: -webkit-transform 0.15s ease-out, -webkit-box-shadow 0.2s ease-out;
  -o-transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out, -webkit-transform 0.15s ease-out, -webkit-box-shadow 0.2s ease-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  will-change: transform;
}

.box-header {
    position: relative;
    padding: 12px 20px;
    color: #ffffff;
    border-bottom: 2px solid var(--retro-blue);
    overflow: hidden;
    background: transparent;
    border-bottom: 0.6px solid var(--retro-blue);
    box-shadow: inset 0 -1px 4px rgba(0, 170, 255, 0.25);
    z-index: 0;
}

    /* Wasserfarben Hintergrund */
    .box-header::before {
        content: "";
        position: absolute;
        inset: -50px;
        z-index: 0;
        pointer-events: none;
        filter: blur(28px); /* vorher 50px – jetzt sichtbarer */
        opacity: 0.85; /* vorher 0.7 – jetzt intensiver */
        background: radial-gradient(ellipse at 20% 30%, rgba(0, 100, 160, 0.4) 0%, transparent 55%), radial-gradient(ellipse at 75% 35%, rgba(0, 130, 255, 0.35) 0%, transparent 60%), radial-gradient(ellipse at 55% 75%, rgba(0, 70, 160, 0.4) 0%, transparent 55%), radial-gradient(ellipse at 40% 50%, rgba(0, 90, 200, 0.3) 0%, transparent 60%);
        background-blend-mode: lighten;
        animation: watercolorFluid 60s ease-in-out infinite;
    }

@keyframes watercolorFluid {
    0% {
        transform: translate(0%, 0%) scale(1);
    }

    33% {
        transform: translate(-1.5%, -2%) scale(1.02);
    }

    66% {
        transform: translate(1.5%, 1%) scale(1.01);
    }

    100% {
        transform: translate(0%, 0%) scale(1);
    }
}

/* Abdunkelung zur Kontrasterhaltung */
.box-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12); /* vorher 0.18 – jetzt weniger dominant */
    z-index: 1;
    pointer-events: none;
}

/* Inhalt im Vordergrund */
.box-header > * {
    position: relative;
    z-index: 2;
}




@keyframes retroGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



@keyframes subtleShinePass {
    0% {
        left: -100%;
    }

    70% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}


.profile-section {
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 18px;
}

.profile-image-container {
    z-index: 3;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--#293ee6f4);
    -webkit-box-shadow: 0 0 10px var(--retro-glow-blue);
    box-shadow: 0 0 10px var(--retro-glow-blue);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.profile-image {
    z-index: 3;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.profile-info .username {
    z-index: 3;
    font-family: 'Audiowide', sans-serif;
    font-size: 22px;
    color: #cccfd1;
    text-shadow: 0 0 10px var(--retro-glow-blue);
    margin-bottom: 4px;
}

.profile-info .slogan,
.profile-info .location {
    font-size: 13px;
    z-index: 3;
    color: #c0c0c0;
    margin: 4px 0;
    font-family: 'Fira Code', monospace;
}
 

    .box-divider {
      height: 1px;
      width: 100%;
      background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--retro-blue)), to(transparent));
      background: -o-linear-gradient(left, transparent, var(--retro-blue), transparent);
      background: linear-gradient(to right, transparent, var(--retro-blue), transparent);
      opacity: 0.5;
    }
.box-body {
    position: relative;
    background: rgba(8, 12, 22, 0.85);
    backdrop-filter: blur(4px);
    padding: 20px;
    color: var(--xp-gray);
    box-shadow: inset 0 1px 4px rgba(0, 170, 255, 0.2);
    flex-grow: 1;
    overflow: hidden;
    box-shadow: inset 0 1px 5px rgba(0, 136, 255, 0.3);
    z-index: 0;
}

    /* Wasserfarben-Effekt (dunkler als Header) */
    .box-body::before {
        content: "";
        position: absolute;
        inset: -50px;
        z-index: 0;
        pointer-events: none;
        filter: blur(35px);
        opacity: 0.75;
        background: radial-gradient(ellipse at 25% 30%, rgba(0, 60, 110, 0.3) 0%, transparent 60%), radial-gradient(ellipse at 75% 40%, rgba(0, 90, 150, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 50% 70%, rgba(0, 40, 100, 0.3) 0%, transparent 60%), radial-gradient(ellipse at 40% 50%, rgba(0, 70, 130, 0.25) 0%, transparent 60%);
        background-blend-mode: lighten;
        animation: watercolorFluidDark 60s ease-in-out infinite;
    }

    /* Leichte Abdunklung für besseren Kontrast */
    .box-body::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.15);
        z-index: 1;
        pointer-events: none;
    }

    /* Inhalt immer sichtbar über dem Effekt */
    .box-body > * {
        position: relative;
        z-index: 2;
    }

/* Bewegung – etwas gedämpfter als Header */
@keyframes watercolorFluidDark {
    0% {
        transform: translate(0%, 0%) scale(1);
    }

    50% {
        transform: translate(-1.2%, 1.2%) scale(1.015);
    }

    100% {
        transform: translate(0%, 0%) scale(1);
    }
}


    @-webkit-keyframes shine {
      0% { left: -100%; }
      40%, 60% { left: 100%; }
      100% { left: 100%; }
    }

    @keyframes shine {
      0% { left: -100%; }
      40%, 60% { left: 100%; }
      100% { left: 100%; }
    }

    /* 3D HECTOR Text */
    .hector-3d-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-perspective: 900px;
              perspective: 900px;
      margin: 30px 0 35px 0;
      height: 110px;
      position: relative;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .scene {
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-animation: rotate 15s infinite linear var(--auto-rotation);
              animation: rotate 15s infinite linear var(--auto-rotation);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    @-webkit-keyframes rotate {
      0% { -webkit-transform: rotateY(0deg) rotateX(-10deg); transform: rotateY(0deg) rotateX(-10deg); }
      100% { -webkit-transform: rotateY(360deg) rotateX(-10deg); transform: rotateY(360deg) rotateX(-10deg); }
    }

    @keyframes rotate {
      0% { -webkit-transform: rotateY(0deg) rotateX(-10deg); transform: rotateY(0deg) rotateX(-10deg); }
      100% { -webkit-transform: rotateY(360deg) rotateX(-10deg); transform: rotateY(360deg) rotateX(-10deg); }
    }

    .cube-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .letter-container {
      position: absolute;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .cube {
      position: absolute;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(0, 160, 255, 0.45);
      background: rgba(0, 136, 255, 0.30);
      -webkit-transition: background 0.3s ease, border-color 0.3s ease;
      -o-transition: background 0.3s ease, border-color 0.3s ease;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    .face.front  { -webkit-transform: translateZ(9px); transform: translateZ(9px); background: rgba(0, 140, 255, 0.38); }
    .face.back   { -webkit-transform: rotateY(180deg) translateZ(9px); transform: rotateY(180deg) translateZ(9px); background: rgba(0, 140, 255, 0.38); }
    .face.right  { -webkit-transform: rotateY(90deg) translateZ(9px); transform: rotateY(90deg) translateZ(9px); background: rgba(0, 125, 230, 0.32); }
    .face.left   { -webkit-transform: rotateY(-90deg) translateZ(9px); transform: rotateY(-90deg) translateZ(9px); background: rgba(0, 125, 230, 0.32); }
    .face.top    { -webkit-transform: rotateX(90deg) translateZ(9px); transform: rotateX(90deg) translateZ(9px); background: rgba(0, 110, 210, 0.28); }
    .face.bottom { -webkit-transform: rotateX(-90deg) translateZ(9px); transform: rotateX(-90deg) translateZ(9px); background: rgba(0, 110, 210, 0.28); }

    @-webkit-keyframes glitch-effect {
      0%, 100% { -webkit-transform: translate(0,0) skew(0deg,0deg); transform: translate(0,0) skew(0deg,0deg); opacity: 1; }
      25% { -webkit-transform: translate(2px, -2px) skew(-5deg, -2deg); transform: translate(2px, -2px) skew(-5deg, -2deg); opacity: 0.88; }
      50% { -webkit-transform: translate(-2px, 2px) skew(3deg, 4deg); transform: translate(-2px, 2px) skew(3deg, 4deg); opacity: 0.78; }
      75% { -webkit-transform: translate(1px, -1px) skew(2deg, -3deg); transform: translate(1px, -1px) skew(2deg, -3deg); opacity: 0.92; }
    }

    @keyframes glitch-effect {
      0%, 100% { -webkit-transform: translate(0,0) skew(0deg,0deg); transform: translate(0,0) skew(0deg,0deg); opacity: 1; }
      25% { -webkit-transform: translate(2px, -2px) skew(-5deg, -2deg); transform: translate(2px, -2px) skew(-5deg, -2deg); opacity: 0.88; }
      50% { -webkit-transform: translate(-2px, 2px) skew(3deg, 4deg); transform: translate(-2px, 2px) skew(3deg, 4deg); opacity: 0.78; }
      75% { -webkit-transform: translate(1px, -1px) skew(2deg, -3deg); transform: translate(1px, -1px) skew(2deg, -3deg); opacity: 0.92; }
    }
    .glitch {
      -webkit-animation: glitch-effect 0.18s 2 linear;
              animation: glitch-effect 0.18s 2 linear;
    }

    /* Musikplayer */
    #musicControls {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 20px;
      margin-bottom: 12px;
    }

    .musicButton {
      background-color: rgba(0, 30, 60, 0.6);
      border: 1px solid var(--retro-blue);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      cursor: pointer;
      -webkit-transition: all 0.15s ease-out;
      -o-transition: all 0.15s ease-out;
      transition: all 0.15s ease-out;
      -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.4);
              box-shadow: 0 0 6px rgba(0,0,0,0.4);
    }

    .musicButton:hover {
      background-color: rgba(0, 136, 255, 0.4);
      -webkit-box-shadow: 0 0 12px var(--retro-glow-blue);
              box-shadow: 0 0 12px var(--retro-glow-blue);
      -webkit-transform: scale(1.08);
          -ms-transform: scale(1.08);
              transform: scale(1.08);
    }
    .musicButton:active {
      -webkit-transform: scale(0.96);
          -ms-transform: scale(0.96);
              transform: scale(0.96);
      background-color: rgba(0, 136, 255, 0.6);
    }

    .musicButton svg {
      fill: var(--retro-glow-blue);
      width: 18px;
      height: 18px;
    }

    .progress-container {
      width: 100%;
      margin-top: 12px;
    }

    .progress-bar {
      width: 100%;
      height: 5px;
      background-color: rgba(0, 0, 0, 0.6);
      border: 1px solid var(--retro-blue);
      border-radius: 3px;
      margin-bottom: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: -webkit-gradient(linear, left top, right top, from(var(--retro-blue)), to(var(--neon-green)));
      background: -o-linear-gradient(left, var(--retro-blue), var(--neon-green));
      background: linear-gradient(90deg, var(--retro-blue), var(--neon-green));
      border-radius: 2px;
      width: 0%;
      -webkit-transition: width 0.1s linear;
      -o-transition: width 0.1s linear;
      transition: width 0.1s linear;
      -webkit-box-shadow: 0 0 6px var(--neon-green);
              box-shadow: 0 0 6px var(--neon-green);
    }

    .time-display {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      font-size: 11px;
      color: #b0b0b0;
      font-family: 'Fira Code', monospace;
    }

    /* Discord Join Button */
.discord-button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
}

/* BUTTON */

/* BUTTON */
#discordButton {
  background: #5865F2;
  border: none;
  border-radius: 50px;
  width: 60px;
  height: 48px; /* Kleinere Höhe, mehr Button-artig */
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Icon und Text */
  cursor: pointer;
  transition: background 0.3s ease;
}

.discord-icon {
  width: 24px;  /* Klein und scharf */
  height: 24px;
  display: block;
  margin: 0 auto;
  transition: transform 0.6s ease;
}

.join-text {
  color: white;
  font-family: 'Fira Code', monospace;
  font-size: 15px;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.25s ease 0.15s;
}

#discordButton:hover {
  width: 160px;
  background: #4752C4;
}

#discordButton:hover .join-text {
  opacity: 1;
}

#discordButton:hover .discord-icon {
  transform: rotate(360deg);
}






    /* Responsive Anpassungen */
    @media (max-width: 768px) {
        #main-box {
            width: 90%;
            max-width: 650px;
            border: 1px solid rgba(0, 150, 255, 0.4);
            box-shadow: 0 0 8px rgba(0, 180, 255, 0.3), inset 0 0 6px rgba(0, 100, 200, 0.15);
            border-radius: 10px;
            background: rgba(12, 20, 30, 0.75);
            backdrop-filter: blur(5px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            font-family: 'Fira Code', monospace;
            position: absolute;
            z-index: 5;
            transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
        }
      .profile-image-container { width: 50px; height: 50px; }
      .profile-info .username { font-size: 19px; }
      .profile-info .slogan, .profile-info .location { font-size: 12px; }

      .hector-3d-container {
        height: 90px;
        margin: 20px 0 25px 0;
        -webkit-perspective: 700px;
                perspective: 700px;
      }
      .face { width: 15px; height: 15px; }
      .face.front  { -webkit-transform: translateZ(7.5px); transform: translateZ(7.5px); }
      .face.back   { -webkit-transform: rotateY(180deg) translateZ(7.5px); transform: rotateY(180deg) translateZ(7.5px); }
      .face.right  { -webkit-transform: rotateY(90deg) translateZ(7.5px); transform: rotateY(90deg) translateZ(7.5px); }
      .face.left   { -webkit-transform: rotateY(-90deg) translateZ(7.5px); transform: rotateY(-90deg) translateZ(7.5px); }
      .face.top    { -webkit-transform: rotateX(90deg) translateZ(7.5px); transform: rotateX(90deg) translateZ(7.5px); }
      .face.bottom { -webkit-transform: rotateX(-90deg) translateZ(7.5px); transform: rotateX(-90deg) translateZ(7.5px); }

      #discordButton { padding: 12px 0; font-size: 15px; }
      #discordButton:hover { font-size: 14px; }
      .musicButton { width: 36px; height: 36px; }
      .musicButton svg { width: 16px; height: 16px; }
    }

#main-box::before {
    content: "";
    position: absolute;
    inset: -50px;
    z-index: -1;
    border-radius: 30%;
    pointer-events: none;
    background: conic-gradient( from 45deg, rgba(0, 160, 255, 0.15), rgba(0, 100, 200, 0.08), rgba(80, 0, 160, 0.1), rgba(0, 120, 255, 0.15), rgba(0, 80, 150, 0.08), rgba(0, 160, 255, 0.15) );
    filter: blur(40px);
    opacity: 1;
    animation: auroraFlow 25s ease-in-out infinite;
}

@keyframes auroraGlow {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.04);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

    @media (max-width: 480px) {
      .startText { font-size: clamp(14px, 5vw, 18px); }
      .box-header { padding: 12px 15px;}
      .box-body { padding: 15px; }
      .profile-section { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 10px; }
      .profile-info .username { font-size: 18px; }

      .hector-3d-container {
        height: 70px;
        margin: 15px 0 20px 0;
      }
      .face { width: 12px; height: 12px; }
      .face.front  { -webkit-transform: translateZ(6px); transform: translateZ(6px); }
      .face.back   { -webkit-transform: rotateY(180deg) translateZ(6px); transform: rotateY(180deg) translateZ(6px); }
      .face.right  { -webkit-transform: rotateY(90deg) translateZ(6px); transform: rotateY(90deg) translateZ(6px); }
      .face.left   { -webkit-transform: rotateY(-90deg) translateZ(6px); transform: rotateY(-90deg) translateZ(6px); }
      .face.top    { -webkit-transform: rotateX(90deg) translateZ(6px); transform: rotateX(90deg) translateZ(6px); }
      .face.bottom { -webkit-transform: rotateX(-90deg) translateZ(6px); transform: rotateX(-90deg) translateZ(6px); }

      #discordButton { font-size: 14px; padding: 10px 0; }
      #discordButton:hover { font-size: 13px; }
      #musicControls { gap: 15px; }
      .musicButton { width: 32px; height: 32px; }
      .musicButton svg { width: 14px; height: 14px; }
    }