Füge Übergangseffekte für das Overlay hinzu und aktualisiere die Sichtbarkeit bei Berührungen

css/style.css

@@ -76,6 +76,12 @@ body::before {
   width: max-content;
   max-width: calc(100vw - 48px);
   z-index: 10;
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+#overlay.hidden {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-6px);
 }
 
 #overlay h1 {

js/app.js

@@ -1,5 +1,6 @@
 document.addEventListener('DOMContentLoaded', function(){
   const stage = document.getElementById('stage');
+  const overlay = document.getElementById('overlay');
   const touches = new Map(); // id -> {el,x,y,colorIdx}
   const MAX_TOUCHES = /iPhone/.test(navigator.userAgent) ? 5 : 20;
   const COLOR_CLASSES = ['c1','c2','c3','c4','c5','c6','c7','c8'];
@@ -139,6 +140,7 @@ document.addEventListener('DOMContentLoaded', function(){
         nodes.forEach(node=>node.remove());
         touches.clear();
         usedColors.clear();
+        overlay.classList.remove('hidden');
       },160);
     }
   }
@@ -150,6 +152,7 @@ document.addEventListener('DOMContentLoaded', function(){
     const prevSize = touches.size;
     changed.forEach(t=>{ if(touches.size < MAX_TOUCHES) createFinger(t); });
     if(touches.size > prevSize){
+      overlay.classList.add('hidden');
       cancelSelection();
       selectionTimer = setTimeout(startSelectionIfNeeded, 700);
     }
@@ -184,6 +187,7 @@ document.addEventListener('DOMContentLoaded', function(){
   const mouseId = 'mouse';
   stage.addEventListener('mousedown', function(e){
     mouseDown = true;
+    overlay.classList.add('hidden');
     createFinger({identifier:mouseId, clientX:e.clientX, clientY:e.clientY});
     cancelSelection();
     startSelectionIfNeeded();