/* EIGENE SCHRIFTART EINBINDEN */
@font-face {
  font-family: 'Arial Narrow';
  src: url('arialnarrow.ttf') format('truetype');
}

body { padding: 0; margin: 0; background: #000000; } /* Komplett Schwarz passt oft besser zu Terminal-Ästhetik */
#unity-container { position: absolute; width: 100%; height: 100%; }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%); }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100%; }
#unity-canvas { background: #000000; width: 100%; height: 100%; }
.unity-mobile #unity-canvas { width: 100%; height: 100%; }

/* LADEBILDSCHIRM CONTAINER */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 800px;
  gap: 20px; /* Abstand zwischen allen Elementen */
}

/* 1. HGB LOGO OBEN */
#hgb-logo {
  height: 60px; /* Höhe anpassen, falls es zu wuchtig ist */
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

/* 2. WELCOME TEXT */
#custom-welcome-text {
  color: white;
  font-family: 'Arial Narrow', sans-serif;
  font-size: 24px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 3. INTRO TEXT (Terminal Style) */
#intro-text {
  color: #a0a0a0;
  font-family: 'Arial Narrow', monospace, sans-serif;
  font-size: 16px;
  text-align: left;
  line-height: 1.6;
  border-left: 2px solid white; /* Setzt einen schönen optischen Akzent */
  padding-left: 15px;
  margin-bottom: 10px;
  width: 400px; /* Gleiche Breite wie der Ladebalken */
}

/* 4. ANIMIERTER LADEBALKEN */
#unity-progress-bar-empty {
  width: 400px;
  height: 25px;
  background: #111;
  border: 1px solid #444; /* Dünner, technischer Rahmen */
  position: relative;
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  background-color: white;
  /* Animierte Streifen (Glitch / Terminal Vibe) */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: 28px 28px;
  animation: moveStripes 1s linear infinite;
  box-shadow: 0 0 10px rgba(255,255,255,0.4); /* Leichtes Leuchten */
}

/* Keyframes für die Streifen-Animation */
@keyframes moveStripes {
  0% { background-position: 0 0; }
  100% { background-position: 28px 0; }
}

/* 5. SPONSOR LOGOS UNTEN */
#sponsor-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
}

#sponsor-logos img {
  height: 100px;
  width: auto;
  object-fit: contain;
}

/* UNITY LOGO (Links unten, dezent) */
#unity-logo {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: url('unity-logo-dark.png') no-repeat center;
  background-size: contain;
  opacity: 0.5; /* Leicht transparent, damit es nicht vom Rest ablenkt */
}

/* FOOTER UND WARNINGS */
#unity-footer { position: relative; }
.unity-mobile #unity-footer { display: none; }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center; }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: 'Arial Narrow', arial; font-size: 18px; }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none; }