scales fixes, rubbish remove

components/graphics/NetrunnerMatrix.tsx

@@ -60,8 +60,23 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
     if (!container || hasTransferred.current) return;
 
     const canvas = document.createElement("canvas");
-    canvas.className =
-      "absolute inset-0 w-full h-full block transition-opacity duration-1000 opacity-0 z-0";
+
+    // Используем zIndex: -1, чтобы канвас был ФОНОМ внутри контейнера
+    Object.assign(canvas.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      display: "block",
+      zIndex: "-1",
+      backgroundColor: isDarkMode ? "#0a0a0c" : "#fafafc",
+      pointerEvents: "none", // Чтобы клики проходили сквозь канвас на кнопки
+      transition: "opacity 1.5s ease-in-out",
+      opacity: "0",
+    });
+
+    canvas.id = "matrix-canvas";
     container.insertBefore(canvas, container.firstChild);
 
     try {
@@ -73,15 +88,19 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
       const isWeakHardware = cores <= 4 || memory <= 4;
       const isLowQuality = isMobile || isWeakHardware;
 
-      // На слабом ПК и телефонах рендерим 75% от разрешения экрана
-      const pixelScale = 1;
+      const isMobileDevice = window.innerWidth <= 768;
+
+      const currentDPR = window.devicePixelRatio || 1;
+      const optimalScale = isMobileDevice
+        ? Math.min(currentDPR, 1.25)
+        : currentDPR;
       // ----------------------------------------------
 
       const logicalWidth = container.clientWidth;
       const logicalHeight = container.clientHeight;
 
-      canvas.width = logicalWidth * pixelScale;
-      canvas.height = logicalHeight * pixelScale;
+      canvas.width = logicalWidth * optimalScale;
+      canvas.height = logicalHeight * optimalScale;
 
       const worker = new Worker(
         `/wasm-matrix/matrix_worker.js?v=${ENGINE_VERSION}`,
@@ -100,7 +119,7 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
             canvas: offscreen,
             logicalWidth,
             logicalHeight,
-            pixelScale,
+            pixelScale: optimalScale,
             eyeY: getEyeY(),
             eyeScale,
             isMobile,
@@ -115,26 +134,32 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
 
       worker.onmessage = (e) => {
         if (e.data.type === "READY") {
-          canvas.classList.remove("opacity-0");
-          canvas.classList.add("opacity-100");
+          // Небольшой таймаут гарантирует, что браузер применит transition
+          requestAnimationFrame(() => {
+            canvas.style.opacity = "1";
+            setIsLoaded(true);
+          });
         }
       };
 
       const resizeObserver = new ResizeObserver((entries) => {
         for (let entry of entries) {
-          const { width, height } = entry.contentRect;
-          if (width === 0 || height === 0) continue;
+          const { width: newWidth, height: newHeight } = entry.contentRect;
+          if (newWidth === 0 || newHeight === 0) continue;
 
-          const isMob = width <= 768;
+          const isMob = newWidth <= 768;
           const lowQual = isMob || isWeakHardware;
-          const pScale = 1;
+
+          // ВАЖНО: Используем тот же коэффициент, что и при INIT
+          const currentDPR = window.devicePixelRatio || 1;
+          const pScale = isMob ? Math.min(currentDPR, 1.25) : currentDPR;
 
           workerRef.current?.postMessage({
             type: "RESIZE",
             payload: {
-              logicalWidth: width,
-              logicalHeight: height,
-              pixelScale: pScale,
+              logicalWidth: newWidth,
+              logicalHeight: newHeight,
+              pixelScale: pScale, // Теперь скейл совпадает с физикой канваса
               eyeY: getEyeY(),
               eyeScale: isMob ? 0.8 : 1.5,
               isMobile: isMob,
@@ -144,7 +169,6 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
           });
         }
       });
-
       resizeObserver.observe(container);
 
       return () => {
@@ -266,9 +290,10 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
   return (
     <div
       ref={containerRef}
-      className="absolute inset-0 overflow-hidden z-0"
+      className="absolute inset-0 overflow-hidden z-5" // Убрали z-0, чтобы не путаться
       style={{ backgroundColor: isDarkMode ? "#0a0a0c" : "#fafafc" }}
     >
+      {/* Оверлей со скан-линиями. Должен быть ВЫШЕ канваса (z-10) */}
       <div
         className="absolute inset-0 pointer-events-none opacity-[0.15] dark:opacity-[0.25] hidden md:block z-10"
         style={{
@@ -276,6 +301,7 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
           backgroundSize: "100% 4px, 3px 100%",
         }}
       />
+      {/* Канвас вставится сюда программно с zIndex -1 */}
     </div>
   );
 };