<template>
  <div class="contenthidden">
    <div class="contentscroll">
      <!-- Spiel-Titel -->
      <div class="game-title">
        <h1>{{ $t('minigames.match3.title') }}</h1>
        <p>{{ $t('minigames.match3.campaignDescription') }}</p>
      </div>

      <!-- Kampagnen-Status -->
      <div class="game-layout">
        <div class="stats-section">
          <div class="stats-card">
            <div class="stats-header">
              <div class="stats-header-content">
                <h3 class="stats-title">{{ $t('minigames.match3.gameStats') }}</h3>
                <button class="toggle-button" @click="toggleStats">
                  <span class="toggle-icon">{{ toggleIcon }}</span>
                </button>
              </div>
            </div>
            <div class="stats-list" v-if="isStatsExpanded">
              <div class="stat-row">
                <span class="stat-value score-value">{{ score }}</span>
                <span class="stat-label">{{ $t('minigames.match3.score') }}</span>
              </div>
              
              <div class="stat-row">
                <span class="stat-value moves-value">{{ moves }}</span>
                <span class="stat-label">{{ $t('minigames.match3.moves') }}</span>
              </div>
              
              <div class="stat-row">
                <span class="stat-value level-value">{{ currentLevel }}</span>
                <span class="stat-label">{{ $t('minigames.match3.currentLevel') }}</span>
              </div>
              
              <div class="stat-row">
                <span class="stat-value stars-value">{{ stars }}</span>
                <span class="stat-label">{{ $t('minigames.match3.stars') }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="game-content">
          <!-- Verbleibende Züge -->
          <div class="moves-left-display">
            <span class="moves-left-label">{{ $t('minigames.match3.movesLeft') }}:</span>
            <span class="moves-left-value">{{ safeMovesLeft }}</span>
          </div>
          
          <!-- Level-Info -->
          <div class="level-info-card" v-if="currentLevelData">
            <div class="level-header">
              <div class="level-header-content">
                <h3 class="level-title">
                  {{ $t('minigames.match3.level') }} {{ currentLevel }}: {{ currentLevelData.name }}
                </h3>
                <button class="toggle-button" @click="toggleLevelDescription">
                  <span class="toggle-icon">{{ levelDescriptionExpanded ? '▼' : '▶' }}</span>
                </button>
              </div>
            </div>
            <div class="level-content" v-show="levelDescriptionExpanded">
              <p>{{ currentLevelData.description }}</p>
              <div class="level-objectives">
                <div v-for="(objective, index) in currentLevelData.objectives" :key="index" class="objective-item">
                  <span class="objective-icon">{{ objective.completed ? '✓' : '○' }}</span>
                  <span :class="{ 'completed': objective.completed }">
                    {{ objective.description }}
                  </span>
                  <span class="objective-progress">
                    ({{ getObjectiveProgress(objective) }})
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Game Board -->
          <div class="game-board-container">
            <div class="game-board" 
                 v-if="board.length > 0 && boardWidth > 0 && boardHeight > 0 && gameActive && currentLevelData"
                 :style="{ 
                   'grid-template-columns': `repeat(${boardWidth}, 1fr)`,
                   'grid-template-rows': `repeat(${boardHeight}, 1fr)`
                 }">
              <template v-for="(tile, index) in board" :key="`tile-${index}`">
                <div v-if="isValidPosition(Math.floor(index / boardWidth), index % boardWidth)"
                     :class="['game-tile', { 
                       'empty': !tile, 
                       'dragging': draggedTileIndex === index, 
                       'drag-hover': isDragging && adjacentTilesForHover.includes(index),
                       'rocket-horizontal': tile && tile.type === 'rocket-horizontal',
                       'rocket-vertical': tile && tile.type === 'rocket-vertical',
                       'bomb': tile && tile.type === 'bomb',
                       'rainbow': tile && tile.type === 'rainbow'
                     }]"
                     :data-index="index"
                     :data-type="tile ? tile.type : null"
                     @mousedown="onTileMouseDown($event, index)"
                     @mouseup="onTileMouseUp($event, index)"
                     @mousemove="onTileMouseMove($event)"
                     @mouseenter="onTileMouseEnter($event, index)"
                     @mouseleave="onTileMouseLeave($event, index)"
                     @touchstart="onTileMouseDown($event, index)"
                     @touchend="onTileMouseUp($event, index)"
                     @dblclick="handleDoubleClick(index, $event)">
                  <span v-if="tile" class="tile-symbol">{{ getTileSymbol(tile.type) }}</span>
                </div>
              </template>
            </div>
            
            <!-- Loading State -->
            <div v-else class="game-board-loading">
              <p>Lade Spielbrett...</p>
              <div class="debug-info">
                <p>Debug-Info:</p>
                <p>Board-Länge: {{ board.length }}</p>
                <p>Board-Breite: {{ boardWidth }}</p>
                <p>Board-Höhe: {{ boardHeight }}</p>
                <p>Game Active: {{ gameActive }}</p>
                <p>Current Level Data: {{ currentLevelData ? 'Ja' : 'Nein' }}</p>
                <p>Board Layout: {{ boardLayout ? 'Ja' : 'Nein' }}</p>
              </div>
            </div>

            <!-- Power-Up Animationen (relativ zum Game-Board) -->
            <div v-if="showExplosion" class="power-up-animation" :style="{ left: explosionPosition.x + 'px', top: explosionPosition.y + 'px' }">
              <div class="explosion-effect"></div>
            </div>

            <div v-if="showRocketFlight" class="power-up-animation" :style="{ left: rocketStartPos.x + 'px', top: rocketStartPos.y + 'px' }">
              <div class="rocket-flight" :style="{ '--dx': (rocketEndPos.x - rocketStartPos.x) + 'px', '--dy': (rocketEndPos.y - rocketStartPos.y) + 'px' }"></div>
            </div>

            <div v-if="showRainbowEffect" class="power-up-animation" :style="{ left: rainbowCenter.x + 'px', top: rainbowCenter.y + 'px' }">
              <div class="rainbow-effect"></div>
            </div>

            <div v-if="showBombEffect" class="power-up-animation" :style="{ left: bombCenter.x + 'px', top: bombCenter.y + 'px' }">
              <div class="bomb-effect"></div>
            </div>
            
            <div v-if="showRocketEffect" class="power-up-animation" :style="{ left: rocketCenter.x + 'px', top: rocketCenter.y + 'px' }">
              <div class="rocket-explosion">🚀💥</div>
            </div>
            
            <!-- Raketen-Flug-Animation -->
            <div v-if="rocketTarget.x > 0 && rocketTarget.y > 0" class="rocket-flight-animation" :style="{ left: rocketTarget.x + 'px', top: rocketTarget.y + 'px' }">
              <div class="rocket-flight">🚀</div>
            </div>
            
            <!-- Fliegende Rakete -->
            <div v-if="showFlyingRocket" class="flying-rocket" :style="{ left: rocketCenter.x + 'px', top: rocketCenter.y + 'px' }">
              <div class="rocket-icon">🚀</div>
            </div>
          </div>

          <!-- Spiel-Kontrollen -->
          <div class="game-controls">
            <button class="btn btn-primary" @click="restartLevel">
              {{ $t('minigames.match3.restartLevel') }}
            </button>
            <button class="btn btn-secondary" @click="pauseGame">
              {{ $t('minigames.match3.pause') }}
            </button>
          </div>
        </div>
      </div>

      <!-- Level-Abschluss Dialog -->
      <v-dialog v-model="showLevelComplete" max-width="500">
        <v-card>
          <v-card-title class="text-h5 text-center text-success">
            🎉 {{ $t('minigames.match3.levelComplete') }}! 🎉
          </v-card-title>
          <v-card-text class="text-center">
            <div class="level-complete-stats">
              <div class="stat-item">
                <span class="stat-label">{{ $t('minigames.match3.levelScore') }}:</span>
                <span class="stat-value">{{ levelScore }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">{{ $t('minigames.match3.movesUsed') }}:</span>
                <span class="stat-value">{{ moves }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">{{ $t('minigames.match3.starsEarned') }}:</span>
                <span class="stat-value">{{ levelStars }}</span>
              </div>
            </div>
          </v-card-text>
          <v-card-actions class="justify-center">
            <v-btn class="custom-btn primary-btn" @click="nextLevel">
              {{ $t('minigames.match3.nextLevel') }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <!-- Kampagnen-Abschluss Dialog -->
      <v-dialog v-model="showCampaignComplete" max-width="600">
        <v-card>
          <v-card-title class="text-h5 text-center text-success">
            🏆 {{ $t('minigames.match3.campaignComplete') }}! 🏆
          </v-card-title>
          <v-card-text class="text-center">
            <div class="campaign-complete-stats">
              <div class="stat-item">
                <span class="stat-label">{{ $t('minigames.match3.totalScore') }}:</span>
                <span class="stat-value">{{ score }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">{{ $t('minigames.match3.totalStars') }}:</span>
                <span class="stat-value">{{ stars }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">{{ $t('minigames.match3.levelsCompleted') }}:</span>
                <span class="stat-value">{{ completedLevels }}</span>
              </div>
            </div>
          </v-card-text>
          <v-card-actions class="justify-center">
            <v-btn class="custom-btn primary-btn" @click="restartCampaign">
              {{ $t('minigames.match3.restartCampaign') }}
            </v-btn>
            <v-btn class="custom-btn secondary-btn" @click="$router.push('/')">
              {{ $t('minigames.backToGames') }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <!-- Pause Dialog -->
      <v-dialog v-model="showPause" max-width="400">
        <v-card>
          <v-card-title class="text-h5 text-center">
            {{ $t('minigames.match3.paused') }}
          </v-card-title>
          <v-card-actions class="justify-center">
            <v-btn class="custom-btn primary-btn" @click="resumeGame">
              {{ $t('minigames.match3.resume') }}
            </v-btn>
            <v-btn class="custom-btn secondary-btn" @click="restartLevel">
              {{ $t('minigames.match3.restartLevel') }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <!-- Power-Up Animationen -->
    </div>
  </div>
</template>

<script>
import apiClient from '../../utils/axios.js';

export default {
  name: 'Match3Game',
  data() {
    const initialData = {
      // Game state
      gameActive: false,
      isPaused: false,
      showPause: false,
      showLevelComplete: false,
      showCampaignComplete: false,
      showGameOver: false,
      
      // Campaign data
      campaignData: null,
      currentLevel: 1, // Standardwert, wird später überschrieben
      completedLevels: 0,
      currentLevelData: null,
      
      // Game board
      board: [],
      boardLayout: [], // Neue: Array der Level-Form
      boardWidth: 6, // Standardwert für 6x6
      boardHeight: 6, // Standardwert für 6x6
      tileTypes: ['gem', 'star', 'heart'], // Normale Tiles (ohne Power-Ups)
      powerUpTypes: ['rocket', 'bomb', 'rainbow'], // Power-Up Tiles (werden nur durch Matches erstellt)
      
      // Game progress
      score: 0,
      levelScore: 0,
      stars: 0,
      levelStars: 0,
      moves: 0,
      movesLeft: 15,
      matchesMade: 0, // Neue: Zählt tatsächlich gemachte Matches
      
      // Drag & drop
      dragStartIndex: null,
      dragStartX: null,
      dragStartY: null,
        originalTilePosition: null,
      isDragging: false,
        draggedTileIndex: null, // Neuer: Index des aktuell gedraggten Tiles
        adjacentTilesForHover: [], // Neue: Liste der benachbarten Tiles für Hover
        currentlyAnimatingTile: null, // Neuer: Index des aktuell animierten Tiles
      dragElement: null,
      dragOffsetX: 0,
      dragOffsetY: 0,
      boundMouseMoveHandler: null,
      boundTouchMoveHandler: null,
      
      // Fall animations
      isFalling: false,
      fallingTiles: [],
      newTiles: [],
      
      // Match tracking
      matchedTiles: [],
      cascadeRound: 0, // Neue: Zählt Kaskaden-Runden
      
      // UI state
      statsExpanded: false,
      levelDescriptionExpanded: true,
      
      // SICHERHEIT: Verhindere zu viele API-Aufrufe
      isLoadingData: false,
      lastApiCall: 0,
      apiCallCooldown: 1000, // 1 Sekunde Cooldown zwischen API-Aufrufen
      
      // WICHTIG: Verhindere mehrfache Level-Initialisierung
      isInitializingLevel: false,
      
      // Animation states
      showExplosion: false,
      explosionPosition: { x: 0, y: 0 },
      showRocketFlight: false,
      rocketStartPos: { x: 0, y: 0 },
      rocketEndPos: { x: 0, y: 0 },
      showRainbowEffect: false,
      rainbowCenter: { x: 0, y: 0 },
      showBombEffect: false,
      bombCenter: { x: 0, y: 0 },
      showRocketEffect: false,
      rocketCenter: { x: 0, y: 0 },
      rocketTarget: { x: -1, y: -1 },
      showFlyingRocket: false,
      
      // Sound-Effekte
      sounds: {
        move: null,
        bomb: null,
        rocket: null,
        rainbow: null
      }
    };
    
    return initialData;
  },
  mounted() {
    // Initialisiere Sound-Effekte
    this.initializeSounds();
    
    // Lade die Kampagnendaten
    this.loadCampaignData();
    
    // Füge globale Event-Listener hinzu
    document.addEventListener('mousemove', this.onGlobalMouseMove);
    document.addEventListener('mouseup', this.onGlobalMouseUp);
  },
  
  beforeUnmount() {
    // Entferne globale Event-Listener
    document.removeEventListener('mousemove', this.onGlobalMouseMove);
    document.removeEventListener('mouseup', this.onGlobalMouseUp);
  },
  methods: {
    // Initialisiere Sound-Effekte
    initializeSounds() {
      try {
        // Verwende den korrekten Pfad für Vite public Ordner
        this.sounds.move = new Audio('/sounds/match3/move.wav');
        this.sounds.bomb = new Audio('/sounds/match3/bomb.wav');
        this.sounds.rocket = new Audio('/sounds/match3/roket.wav'); // Beachte: Datei heißt "roket.wav"
        this.sounds.rainbow = new Audio('/sounds/match3/rainbow.wav');
        this.sounds.falling = new Audio('/sounds/match3/falling.wav');
        
        // Setze Lautstärke auf 50%
        this.sounds.move.volume = 0.5;
        this.sounds.bomb.volume = 0.5;
        this.sounds.rocket.volume = 0.5;
        this.sounds.rainbow.volume = 0.5;
        this.sounds.falling.volume = 0.5;
        
        // Warte bis alle Sounds geladen sind
        Promise.all([
          this.sounds.move.load(),
          this.sounds.bomb.load(),
          this.sounds.rocket.load(),
          this.sounds.rainbow.load(),
          this.sounds.falling.load()
        ]).then(() => {
          console.log('🔊 Sounds erfolgreich geladen:', {
            move: this.sounds.move.readyState,
            bomb: this.sounds.bomb.readyState,
            rocket: this.sounds.rocket.readyState,
            rainbow: this.sounds.rainbow.readyState,
            falling: this.sounds.falling.readyState
          });
        }).catch(error => {
          console.warn('⚠️ Fehler beim Laden der Sounds:', error);
        });
        
      } catch (error) {
        console.warn('⚠️ Sounds konnten nicht geladen werden:', error);
      }
    },
    
    // Hilfsmethode: Spiele Sound ab
    playSound(soundType) {
      try {
        if (this.sounds[soundType]) {
          // Setze Audio auf Anfang zurück
          this.sounds[soundType].currentTime = 0;
          // Spiele Sound ab
          this.sounds[soundType].play().catch(error => {
            console.warn(`⚠️ Sound ${soundType} konnte nicht abgespielt werden:`, error);
          });
        }
      } catch (error) {
        console.warn(`⚠️ Fehler beim Abspielen von Sound ${soundType}:`, error);
      }
    },
    
    loadCampaignData() {
      // SICHERHEIT: Verhindere zu viele API-Aufrufe
      const now = Date.now();
      if (this.isLoadingData || (now - this.lastApiCall) < this.apiCallCooldown) {
        return Promise.resolve();
      }
      
      this.isLoadingData = true;
      this.lastApiCall = now;
      
      // Lade Kampagnen-Daten
      return apiClient.get('/api/match3/campaigns/1')
        .then(response => {
          // Korrekte Datenstruktur extrahieren: response.data.data
          if (response.data.success && response.data.data) {
            this.campaignData = response.data.data;
            
            // WICHTIG: Warte bis das Level vollständig initialisiert ist
            this.$nextTick(() => {
              // Lade den Benutzer-Fortschritt nach den Kampagnendaten
              this.loadUserProgressAndInitialize();
            });
          } else {
            throw new Error('Ungültige API-Response-Struktur');
          }
        })
        .catch(error => {
          this.handleLoadError('Kampagnendaten konnten nicht geladen werden', error);
        })
        .finally(() => {
          this.isLoadingData = false;
        });
    },

    loadLevelData(levelOrder) {
      // Finde zuerst die Level-ID basierend auf der Reihenfolge
      if (!this.campaignData || !this.campaignData.levels) {
        // KEINE REKURSION: Lade Kampagne nur einmal
        return this.loadCampaignData().then(() => {
          // Nach dem Laden der Kampagne, versuche das Level zu finden
          const levelData = this.campaignData.levels.find(l => l.order === levelOrder);
          if (levelData) {
            return this.loadLevelDataInternal(levelData).then(async () => {
              // WICHTIG: Nach dem Laden der Level-Daten, initialisiere das Level
              await this.initializeLevel();
            });
          } else {
            throw new Error(`Level ${levelOrder} nicht in Kampagnendaten gefunden`);
          }
        });
      }
      
      const levelData = this.campaignData.levels.find(l => l.order === levelOrder);
      if (!levelData) {
        // KEINE REKURSION: Lade Kampagne nur einmal
        return this.loadCampaignData().then(async () => {
          const retryLevelData = this.campaignData.levels.find(l => l.order === levelOrder);
          if (!retryLevelData) {
            throw new Error(`Level ${levelOrder} nicht gefunden`);
          }
          // Verwende die gefundenen Daten direkt, ohne Rekursion
          return this.loadLevelDataInternal(retryLevelData).then(async () => {
            // WICHTIG: Nach dem Laden der Level-Daten, initialisiere das Level
            await this.initializeLevel();
          });
        });
      }
      
      // Verwende die gefundenen Daten direkt
      return this.loadLevelDataInternal(levelData).then(async () => {
        // WICHTIG: Nach dem Laden der Level-Daten, initialisiere das Level
        await this.initializeLevel();
      });
    },

    // Neue Hilfsmethode ohne Rekursion
    loadLevelDataInternal(levelData) {
      return apiClient.get(`/api/match3/levels/${levelData.id}`)
        .then(response => {
          
          if (response.data && response.data.success && response.data.data) {
            const freshLevelData = response.data.data;
            
            // Aktualisiere die aktuellen Level-Daten
            this.currentLevelData = freshLevelData;
            this.boardWidth = freshLevelData.boardWidth;
            this.boardHeight = freshLevelData.boardHeight;
            
            // Neue Tile-Typen aus der levelTileTypes-Structure extrahieren
            if (freshLevelData.levelTileTypes && freshLevelData.levelTileTypes.length > 0) {
              this.tileTypes = freshLevelData.levelTileTypes
                .filter(ltt => ltt.isActive && ltt.tileType && ltt.tileType.isActive)
                .map(ltt => ltt.tileType.name);
            } else {
              // Fallback: Verwende die alte tileTypes-Array
              this.tileTypes = freshLevelData.tileTypes || ['gem', 'star', 'heart'];
            }
            
            // WICHTIG: Alle Level-Objekte zurücksetzen (nicht als abgeschlossen markieren)
            if (freshLevelData.objectives) {
              freshLevelData.objectives.forEach(objective => {
                objective.completed = false;
              });
            }
            
            this.boardLayout = this.parseBoardLayout(freshLevelData.boardLayout);
            this.movesLeft = freshLevelData.moveLimit;
            
            return Promise.resolve();
          } else {
            throw new Error('Ungültige API-Response für Level-Daten');
          }
        })
        .catch(error => {
          // Keine Fallback-Daten mehr - wirf einen Fehler
          throw new Error('Level-Daten konnten nicht vom Backend geladen werden');
        });
    },

    loadUserProgress() {
      // Prüfe ob Benutzer eingeloggt ist
      if (!this.$store.getters.isLoggedIn || !this.$store.getters.user) {
        // Fallback: Setze currentLevel basierend auf completedLevels
        if (this.completedLevels > 0) {
          this.currentLevel = this.completedLevels + 1;
        } else {
          this.currentLevel = 1;
        }
        return;
      }

      // Lade Benutzer-Fortschritt
      apiClient.get('/api/match3/campaigns/1/progress')
        .then(response => {
          if (response.data.success) {
            const progress = response.data.data;
            
            this.score = progress.totalScore;
            this.stars = progress.totalStars;
            this.completedLevels = progress.levelsCompleted;
            // WICHTIG: Setze das aktuelle Level korrekt
            // Wenn Level 2 abgeschlossen ist, sollte das aktuelle Level 3 sein
            // Verwende NICHT progress.currentLevel, da das falsch sein könnte
            if (progress.levelsCompleted > 0) {
              this.currentLevel = progress.levelsCompleted + 1;
            } else {
              this.currentLevel = 1;
            }
            
            // Sicherheitscheck: Stelle sicher, dass das Level nicht höher als verfügbar ist
            if (this.campaignData && this.campaignData.levels) {
              const maxLevel = Math.max(...this.campaignData.levels.map(l => l.order));
              if (this.currentLevel > maxLevel) {
                this.currentLevel = maxLevel;
              }
            }
            this.movesLeft = progress.moveLimit - progress.movesUsed; // Verbleibende Züge berechnen
          }
        })
        .catch(error => {
          // Fallback: Setze currentLevel basierend auf completedLevels
          if (this.completedLevels > 0) {
            this.currentLevel = this.completedLevels + 1;
          } else {
            this.currentLevel = 1;
          }
          
          // Fallback für movesLeft
          if (this.currentLevelData) {
            this.movesLeft = this.currentLevelData.moveLimit - this.moves;
          }
        });
    },

    // Neue Methode: Lade Fortschritt und initialisiere dann das Level
    loadUserProgressAndInitialize() {
      // Prüfe ob Benutzer eingeloggt ist
      if (!this.$store.getters.isLoggedIn || !this.$store.getters.user) {
        // Fallback: Setze currentLevel basierend auf completedLevels
        if (this.completedLevels > 0) {
          this.currentLevel = this.completedLevels + 1;
        } else {
          this.currentLevel = 1;
        }
        // Lade das Level basierend auf dem Fallback currentLevel
        this.loadLevelData(this.currentLevel);
        return;
      }

      // Lade Benutzer-Fortschritt
      apiClient.get('/api/match3/campaigns/1/progress')
        .then(response => {
          if (response.data.success) {
            const progress = response.data.data;
            
            this.score = progress.totalScore || 0;
            this.stars = progress.totalStars || 0;
            this.completedLevels = progress.levelsCompleted || 0;
            
            // WICHTIG: Setze das aktuelle Level korrekt
            // Wenn Level 2 abgeschlossen ist, sollte das aktuelle Level 3 sein
            // Verwende NICHT progress.currentLevel, da das falsch sein könnte
            if (progress.levelsCompleted > 0) {
              this.currentLevel = progress.levelsCompleted + 1;
            } else {
              this.currentLevel = 1;
            }
            
            // Sicherheitscheck: Stelle sicher, dass das Level nicht höher als verfügbar ist
            if (this.campaignData && this.campaignData.levels) {
              const maxLevel = Math.max(...this.campaignData.levels.map(l => l.order));
              if (this.currentLevel > maxLevel) {
                this.currentLevel = maxLevel;
              }
            }
            
            // Jetzt lade das richtige Level basierend auf dem geladenen Fortschritt
            this.loadLevelData(this.currentLevel);
          }
        })
        .catch(error => {
          // Fallback: Setze currentLevel basierend auf completedLevels
      if (this.completedLevels > 0) {
        this.currentLevel = this.completedLevels + 1;
      } else {
        this.currentLevel = 1;
      }
          // Lade das Level basierend auf dem Fallback currentLevel
          this.loadLevelData(this.currentLevel);
      });
    },

    async initializeLevel() {
              // WICHTIG: Verhindere mehrfache Level-Initialisierung
        if (this.isInitializingLevel) {
          return;
        }
        
      // Safety check: ensure currentLevelData is loaded
      if (!this.currentLevelData) {
        // KEINE REKURSION: Lade Kampagnendaten nur einmal
        this.loadCampaignData().then(async () => {
          // Nach dem Laden der Kampagne, initialisiere das Level direkt
          if (this.currentLevelData) {
            await this.initializeLevelInternal();
          } else {
            // Level-Daten konnten nicht geladen werden
          }
        });
        return;
      }

      // WICHTIG: Setze Flag für Level-Initialisierung
      this.isInitializingLevel = true;

      // Verwende die bereits geladenen Level-Daten direkt
      await this.initializeLevelInternal();
    },

    // Neue Hilfsmethode ohne Rekursion
    async initializeLevelInternal() {
      const levelData = this.currentLevelData;
      
      // Neue Level-Felder verwenden
      this.boardWidth = levelData.boardWidth;
      this.boardHeight = levelData.boardHeight;
      
      // Neue Tile-Typen aus der levelTileTypes-Structure extrahieren
      if (levelData.levelTileTypes && levelData.levelTileTypes.length > 0) {
        this.tileTypes = levelData.levelTileTypes
          .filter(ltt => ltt.isActive && ltt.tileType && ltt.tileType.isActive)
          .map(ltt => ltt.tileType.name);
      } else {
        // Fallback: Verwende die alte tileTypes-Array
        this.tileTypes = levelData.tileTypes || ['gem', 'star', 'heart'];
      }
      
      // Board-Layout parsen
      if (!levelData.boardLayout) {
        this.boardLayout = [];
      } else {
        // Teile den String in Zeilen auf
        const rows = levelData.boardLayout.split('\n').filter(row => row.trim().length > 0);
        const layout = [];
        
        for (let row = 0; row < rows.length; row++) {
          const rowString = rows[row];
          const rowArray = [];
          
          for (let col = 0; col < rowString.length; col++) {
            const char = rowString[col];
            // Backend-Format: 'x' = Feld (tile), 'o' = kein Feld, andere = spezifischer Tile-Typ
            // Fallback-Format: 't' = Feld (tile), 'f' = kein Feld
            if (char === 'o' || char === 'f') {
              rowArray.push({ type: 'empty', char: char });
            } else if (char === 'x' || char === 't') {
              rowArray.push({ type: 'tile', char: char });
            } else {
              // Spezifischer Tile-Typ
              rowArray.push({ type: 'specific', char: char });
            }
          }
          
          layout.push(rowArray);
        }
        
        this.boardLayout = layout;
      }
      // WICHTIG: Alle Spiel-Statistiken zurücksetzen
      this.moves = 0;
      this.levelScore = 0;
      this.levelStars = 0; // WICHTIG: Level-Sterne müssen auf 0 gesetzt werden
      this.matchesMade = 0; // Reset Match-Zähler
      this.cascadeRound = 0; // Reset Kaskaden-Zähler
      this.movesLeft = levelData.moveLimit; // Initialisiere verbleibende Züge
      
      // Zusätzliche Sicherheit: Stelle sicher, dass levelStars wirklich 0 ist
      if (this.levelStars !== 0) {
        console.warn('LevelStars wurde nicht korrekt zurückgesetzt, setze auf 0');
        this.levelStars = 0;
      }
      
      // WICHTIG: Alle Arrays zurücksetzen
      this.matchedTiles = [];
      this.fallingTiles = [];
      this.newTiles = [];
      this.isFalling = false;
      
      // WICHTIG: Alle Level-Objekte zurücksetzen (nicht als abgeschlossen markieren)
      if (levelData.objectives) {
        levelData.objectives.forEach(objective => {
          objective.completed = false;
        });
      }
      
      // Generiere Board basierend auf dem Layout
      this.board = this.generateBoardFromLayout();
      
      // Zusätzliche Prüfung: Stelle sicher, dass keine initialen Matches vorhanden sind
      // WICHTIG: Reduziere Debug-Ausgaben für bessere Performance
      let attempts = 0;
      const maxAttempts = 10; // Verhindere Endlosschleifen
      
      // Prüfe und korrigiere initiale Matches
      console.log('🔧 Prüfe auf initiale Matches...');
      const initialMatches = this.findMatchesOnBoard(this.board, true);
      
      if (initialMatches.length > 0) {
        console.log(`🔧 ${initialMatches.length} initiale Matches gefunden, starte Korrektur...`);
        this.fixInitialMatches();
      } else {
        console.log('🔧 Keine initialen Matches gefunden, Level ist bereit');
      }
        
      // WICHTIG: Nach der Korrektur der initialen Matches das Brett erneut überprüfen
      console.log('🔍 Überprüfe das Brett nach der Korrektur der initialen Matches...');
      await this.checkBoardAfterSetup();
      
      // WICHTIG: Setze das Spiel als aktiv, aber prüfe NICHT sofort die Level-Objekte
        this.gameActive = true;
        
      // KEINE Prüfung der Level-Objekte beim Start - diese werden nur nach Spielzügen geprüft
      
      // WICHTIG: Reset Flag für Level-Initialisierung
      this.isInitializingLevel = false;
      },

          // Neue Methode: Räume initiale Matches auf (ohne Punkte/Level-Objekte)
    cleanupInitialMatches(matches) {
      console.log('🔧 cleanupInitialMatches - Starte Aufräumen');
      
      if (!matches || matches.length === 0) {
        console.log('🔧 Keine Matches zum Aufräumen gefunden');
        return;
      }
      
      // Sammle alle betroffenen Indizes
      const matchedIndices = new Set();
      matches.forEach(match => {
        match.forEach(index => matchedIndices.add(index));
      });
      
      console.log('🔧 Zu entfernende Indizes:', Array.from(matchedIndices));
      
      // Entferne alle gematchten Tiles (außer Regenbögen)
      matchedIndices.forEach(index => {
        if (this.board[index] && this.board[index].type !== 'rainbow') {
          console.log(`🔧 Entferne Tile an Position ${index}:`, this.board[index]);
          this.board[index] = null;
        }
      });
      
      console.log('🔧 Alle gematchten Tiles entfernt, fülle leere Felder');
      
      // Fülle leere Felder direkt mit neuen Tiles (nur beim Level-Start)
      this.fillEmptySpacesWithNewTiles();
    },

    // Hilfsmethode: Entferne Tile sicher (schützt Regenbögen)
    safeRemoveTile(index) {
      if (this.board[index] && this.board[index].type !== 'rainbow') {
        this.board[index] = null;
        return true;
      }
      return false;
    },

    // Neue Methode: Fülle leere Felder direkt mit neuen Tiles (für Level-Start)
    fillEmptySpacesWithNewTiles() {
      console.log('🔧 fillEmptySpacesWithNewTiles - Starte Auffüllen');
      
      let tilesAdded = 0;
      
      // Gehe durch jede Spalte
      for (let col = 0; col < this.boardWidth; col++) {
        // Gehe von oben nach unten durch die Spalte
        for (let row = 0; row < this.boardHeight; row++) {
          if (this.isValidPosition(row, col)) {
            const index = this.coordsToIndex(row, col);
            if (index !== null && !this.board[index]) {
              // WICHTIG: Prüfe ob es sich um ein freies Feld (o) handelt
              if (this.boardLayout[row] && this.boardLayout[row][col] && 
                  this.boardLayout[row][col].type === 'empty') {
                // Freies Feld - überspringe es
                console.log(`🔧 Überspringe freies Feld an [${row},${col}]`);
                continue;
              }
              
              // Erstelle ein neues Tile
              const tileType = this.tileTypes[Math.floor(Math.random() * this.tileTypes.length)];
              this.board[index] = {
                type: tileType,
                id: Date.now() + row * this.boardWidth + col + Math.random(),
                row: row,
                col: col
              };
              
              tilesAdded++;
              console.log(`🔧 Neues Tile ${tileType} an Position [${row},${col}] hinzugefügt`);
            }
          }
        }
      }
      
      console.log(`🔧 Insgesamt ${tilesAdded} neue Tiles hinzugefügt`);
    },

    startDrag(index, event) {
      if (!this.gameActive || this.isDragging) {
        return;
      }

      // Verhindere Drag während der Fall-Animation
      if (this.isFalling) {
        return;
      }

      this.dragStartIndex = index;
      this.dragStartX = event.clientX || event.touches?.[0]?.clientX;
      this.dragStartY = event.clientY || event.touches?.[0]?.clientY;
      this.isDragging = true;
      
      // Drag-Effekt starten
      this.startDragEffect(event, index);
      
      // Verhindere Standard-Browser-Verhalten
      event.preventDefault();
      event.stopPropagation();
      
      // Registriere Document-Level Event-Handler für bessere Kontrolle
      document.addEventListener('mouseup', this.handleDocumentMouseUp, true);
      document.addEventListener('touchend', this.handleDocumentTouchEnd, true);
    },

    endDrag(event) {
      if (!this.isDragging || this.dragStartIndex === null) {
        return;
      }

      // Verhindere Drag während der Fall-Animation
      if (this.isFalling) {
        this.endDragEffect();
        this.dragStartIndex = null;
        this.dragStartX = null;
        this.dragStartY = null;
        this.isDragging = false;
        return;
      }
      
      // Drag-Effekt beenden
      this.endDragEffect();
      
      const endX = event.clientX || event.changedTouches?.[0]?.clientX;
      const endY = event.clientY || event.changedTouches?.[0]?.clientY;
      
      if (endX && endY) {
        // Finde das Tile, über dem der Drag endet
        const targetIndex = this.findTileAtPosition(endX, endY);
        
        if (targetIndex !== null && targetIndex !== this.dragStartIndex) {
          // Prüfe ob die Tiles benachbart sind
          if (this.areTilesAdjacent(this.dragStartIndex, targetIndex)) {
            this.swapTiles(this.dragStartIndex, targetIndex);
          }
        }
      }
      
      // Reset drag state
      this.dragStartIndex = null;
      this.dragStartX = null;
      this.dragStartY = null;
      this.isDragging = false;
    },

    // Neue Methode: Drag abbrechen (z.B. bei mouseleave)
    cancelDrag() {
      if (!this.isDragging || this.dragStartIndex === null) {
        return;
      }
      
      // Drag-Effekt beenden ohne Swap
      this.endDragEffect();
      
      // Reset drag state
      this.dragStartIndex = null;
      this.dragStartX = null;
      this.dragStartY = null;
      this.isDragging = false;
    },

    // Document-Level Event-Handler für bessere Kontrolle
    handleDocumentMouseUp(event) {
      if (this.isDragging) {
        this.endDrag(event);
      }
    },

    handleDocumentTouchEnd(event) {
      if (this.isDragging) {
        this.endDrag(event);
      }
    },



    // Neue Methode: Finde das Tile an einer bestimmten Bildschirm-Position
    findTileAtPosition(clientX, clientY) {
      // Durchsuche alle Tiles und finde das, das an der Position liegt
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && !this.board[i].isSpecial) {
          const tileElement = document.querySelector(`[data-index="${i}"]`);
          if (tileElement) {
            const rect = tileElement.getBoundingClientRect();
            if (clientX >= rect.left && clientX <= rect.right && 
                clientY >= rect.top && clientY <= rect.bottom) {
              return i;
            }
          }
        }
      }
      return null;
    },

    // Neue Methode: Prüfe ob zwei Tiles benachbart sind
    areTilesAdjacent(index1, index2) {
      if (index1 === null || index2 === null) return false;
      
      const { row: row1, col: col1 } = this.indexToCoords(index1);
      const { row: row2, col: col2 } = this.indexToCoords(index2);
      
      // Tiles sind benachbart wenn sie sich in der gleichen Zeile oder Spalte befinden
      // und nur 1 Position voneinander entfernt sind
      const rowDiff = Math.abs(row1 - row2);
      const colDiff = Math.abs(col1 - col2);
      
      return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1);
    },

    getAdjacentIndex(index, direction) {
      if (index === null) return null;
      
      const { row, col } = this.indexToCoords(index);
      let targetRow = row;
      let targetCol = col;
      
      switch (direction) {
        case 'up':
          targetRow = row - 1;
          break;
        case 'down':
          targetRow = row + 1;
          break;
        case 'left':
          targetCol = col - 1;
          break;
        case 'right':
          targetCol = col + 1;
          break;
        default:
          return null;
      }
      
      // Prüfe ob die Zielposition im Layout gültig ist
      if (!this.isValidPosition(targetRow, targetCol)) {
        return null;
      }
      
      return this.coordsToIndex(targetRow, targetCol);
    },

    findMatchesOnBoard(board, showDebug = true) {
      const matches = [];
      
      // Zuerst alle 5er-Matches finden (höchste Priorität)
      const foundFiveMatches = new Set();
      
      // Horizontale 5er-Matches
      for (let row = 0; row < this.boardHeight; row++) {
        for (let col = 0; col < this.boardWidth - 4; col++) {
          const index1 = this.coordsToIndex(row, col);
          const index2 = this.coordsToIndex(row, col + 1);
          const index3 = this.coordsToIndex(row, col + 2);
          const index4 = this.coordsToIndex(row, col + 3);
          const index5 = this.coordsToIndex(row, col + 4);
          
          if (this.isValidMatch(index1, index2, index3, board) && 
              this.isValidMatch(index2, index3, index4, board) &&
              this.isValidMatch(index3, index4, index5, board)) {
            matches.push([index1, index2, index3, index4, index5]);
            // Markiere alle Positionen als Teil eines 5er-Matches
            [index1, index2, index3, index4, index5].forEach(idx => foundFiveMatches.add(idx));
            if (showDebug) console.log(`🔍 5er-Match horizontal: [${row},${col}] bis [${row},${col+4}]`);
          }
        }
      }
      
      // Vertikale 5er-Matches
      for (let row = 0; row < this.boardHeight - 4; row++) {
        for (let col = 0; col < this.boardWidth; col++) {
          const index1 = this.coordsToIndex(row, col);
          const index2 = this.coordsToIndex(row + 1, col);
          const index3 = this.coordsToIndex(row + 2, col);
          const index4 = this.coordsToIndex(row + 3, col);
          const index5 = this.coordsToIndex(row + 4, col);
          
          if (this.isValidMatch(index1, index2, index3, board) && 
              this.isValidMatch(index2, index3, index4, board) &&
              this.isValidMatch(index3, index4, index5, board)) {
            matches.push([index1, index2, index3, index4, index5]);
            // Markiere alle Positionen als Teil eines 5er-Matches
            [index1, index2, index3, index4, index5].forEach(idx => foundFiveMatches.add(idx));
            if (showDebug) console.log(`🔍 5er-Match vertikal: [${row},${col}] bis [${row+4},${col}]`);
          }
        }
      }
      
      // L-Form Matches finden (mittlere Priorität) - aber nur wenn nicht Teil eines 5er-Matches
              for (let row = 0; row < this.boardHeight; row++) {
          for (let col = 0; col < this.boardWidth; col++) {
            // Prüfe ob an dieser Position ein Tile existiert
            const centerIndex = this.coordsToIndex(row, col);
            if (!centerIndex || !board[centerIndex]) continue;
            
            // Überspringe Positionen, die bereits Teil eines 5er-Matches sind
            if (foundFiveMatches.has(centerIndex)) continue;
            
            const centerType = board[centerIndex].type;
            if (this.isPowerUpTile(centerType)) continue; // Power-ups können nicht Teil von L-Formen sein
          
          // L-Form nach rechts unten (┌)
          if (row + 2 < this.boardHeight && col + 2 < this.boardWidth) {
            // Prüfe vertikale Linie nach unten
            let verticalLength = 1;
            for (let r = row + 1; r < this.boardHeight; r++) {
              const index = this.coordsToIndex(r, col);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                verticalLength++;
            } else {
                break;
              }
            }
            
            // Prüfe horizontale Linie nach rechts
            let horizontalLength = 1;
            for (let c = col + 1; c < this.boardWidth; c++) {
              const index = this.coordsToIndex(row, c);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                horizontalLength++;
          } else {
                break;
              }
            }
            
            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
            if (verticalLength >= 3 && horizontalLength >= 3) {
              const lShapeIndices = [];
              
              // Sammle alle Indizes der vertikalen Linie
              for (let r = row; r < row + verticalLength; r++) {
                const index = this.coordsToIndex(r, col);
                if (index) lShapeIndices.push(index);
              }
              
              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
              for (let c = col + 1; c < col + horizontalLength; c++) {
                const index = this.coordsToIndex(row, c);
                if (index) lShapeIndices.push(index);
              }
              
              // Prüfe ob irgendein Teil der L-Form bereits Teil eines 5er-Matches ist
              const isPartOfFiveMatch = lShapeIndices.some(idx => foundFiveMatches.has(idx));
              
              // Nur hinzufügen, wenn kein Teil eines 5er-Matches
              if (!isPartOfFiveMatch) {
                matches.push({ 
                  type: 'l-shape', 
                  indices: lShapeIndices, 
                  corner: centerIndex, 
                  direction: 'bottom-right',
                  verticalLength,
                  horizontalLength
                });
                if (showDebug) console.log(`🔍 L-Form Match (┌): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
              } else {
                if (showDebug) console.log(`🔍 L-Form Match (┌) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
              }
            }
          }
          
          // L-Form nach links unten (┐)
          if (row + 2 < this.boardHeight && col >= 2) {
            // Prüfe vertikale Linie nach unten
            let verticalLength = 1;
            for (let r = row + 1; r < this.boardHeight; r++) {
              const index = this.coordsToIndex(r, col);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                verticalLength++;
              } else {
                break;
              }
            }
            
            // Prüfe horizontale Linie nach links
            let horizontalLength = 1;
            for (let c = col - 1; c >= 0; c--) {
              const index = this.coordsToIndex(row, c);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                horizontalLength++;
              } else {
                break;
              }
            }
            
            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
            if (verticalLength >= 3 && horizontalLength >= 3) {
              const lShapeIndices = [];
              
              // Sammle alle Indizes der vertikalen Linie
              for (let r = row; r < row + verticalLength; r++) {
                const index = this.coordsToIndex(r, col);
                if (index) lShapeIndices.push(index);
              }
              
              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
              for (let c = col - 1; c >= col - horizontalLength; c--) {
                const index = this.coordsToIndex(row, c);
                if (index) lShapeIndices.push(index);
              }
              
              // Prüfe ob irgendein Teil der L-Form bereits Teil eines 5er-Matches ist
              const isPartOfFiveMatch = lShapeIndices.some(idx => foundFiveMatches.has(idx));
              
              // Nur hinzufügen, wenn kein Teil eines 5er-Matches
              if (!isPartOfFiveMatch) {
                matches.push({ 
                  type: 'l-shape', 
                  indices: lShapeIndices, 
                  corner: centerIndex, 
                  direction: 'bottom-left',
                  verticalLength,
                  horizontalLength
                });
                if (showDebug) console.log(`🔍 L-Form Match (┐): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
              } else {
                if (showDebug) console.log(`🔍 L-Form Match (┐) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
              }
            }
          }
          
          // L-Form nach rechts oben (└)
          if (row >= 2 && col + 2 < this.boardWidth) {
            // Prüfe vertikale Linie nach oben
            let verticalLength = 1;
            for (let r = row - 1; r >= 0; r--) {
              const index = this.coordsToIndex(r, col);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                verticalLength++;
              } else {
                break;
              }
            }
            
            // Prüfe horizontale Linie nach rechts
            let horizontalLength = 1;
            for (let c = col + 1; c < this.boardWidth; c++) {
              const index = this.coordsToIndex(row, c);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                horizontalLength++;
              } else {
                break;
              }
            }
            
            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
            if (verticalLength >= 3 && horizontalLength >= 3) {
              const lShapeIndices = [];
              
              // Sammle alle Indizes der vertikalen Linie
              for (let r = row; r >= row - verticalLength; r--) {
                const index = this.coordsToIndex(r, col);
                if (index) lShapeIndices.push(index);
              }
              
              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
              for (let c = col + 1; c < col + horizontalLength; c++) {
                const index = this.coordsToIndex(row, c);
                if (index) lShapeIndices.push(index);
              }
              
              // Prüfe ob irgendein Teil der L-Form bereits Teil eines 5er-Matches ist
              const isPartOfFiveMatch = lShapeIndices.some(idx => foundFiveMatches.has(idx));
              
              // Nur hinzufügen, wenn kein Teil eines 5er-Matches
              if (!isPartOfFiveMatch) {
                matches.push({ 
                  type: 'l-shape', 
                  indices: lShapeIndices, 
                  corner: centerIndex, 
                  direction: 'top-right',
                  verticalLength,
                  horizontalLength
                });
                if (showDebug) console.log(`🔍 L-Form Match (└): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
              } else {
                if (showDebug) console.log(`🔍 L-Form Match (└) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
              }
            }
          }
          
          // L-Form nach links oben (┘)
          if (row >= 2 && col >= 2) {
            // Prüfe vertikale Linie nach oben
            let verticalLength = 1;
            for (let r = row - 1; r >= 0; r--) {
              const index = this.coordsToIndex(r, col);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                verticalLength++;
              } else {
                break;
              }
            }
            
            // Prüfe horizontale Linie nach links
            let horizontalLength = 1;
            for (let c = col - 1; c >= 0; c--) {
              const index = this.coordsToIndex(row, c);
              if (index && board[index] && board[index].type === centerType && !this.isPowerUpTile(board[index].type)) {
                horizontalLength++;
              } else {
                break;
              }
            }
            
            // L-Form gefunden wenn beide Linien mindestens 3 Tiles lang sind
            if (verticalLength >= 3 && horizontalLength >= 3) {
              const lShapeIndices = [];
              
              // Sammle alle Indizes der vertikalen Linie
              for (let r = row; r >= row - verticalLength; r--) {
                const index = this.coordsToIndex(r, col);
                if (index) lShapeIndices.push(index);
              }
              
              // Sammle alle Indizes der horizontalen Linie (ohne den Eckpunkt zu duplizieren)
              for (let c = col - 1; c >= col - horizontalLength; c--) {
                const index = this.coordsToIndex(row, c);
                if (index) lShapeIndices.push(index);
              }
              
              // Prüfe ob irgendein Teil der L-Form bereits Teil eines 5er-Matches ist
              const isPartOfFiveMatch = lShapeIndices.some(idx => foundFiveMatches.has(idx));
              
              // Nur hinzufügen, wenn kein Teil eines 5er-Matches
              if (!isPartOfFiveMatch) {
                matches.push({ 
                  type: 'l-shape', 
                  indices: lShapeIndices, 
                  corner: centerIndex, 
                  direction: 'top-left',
                  verticalLength,
                  horizontalLength
                });
                if (showDebug) console.log(`🔍 L-Form Match (┘): [${row},${col}] mit ${verticalLength}er vertikal und ${horizontalLength}er horizontal`);
              } else {
                if (showDebug) console.log(`🔍 L-Form Match (┘) übersprungen: [${row},${col}] - Teil eines 5er-Matches`);
              }
            }
          }
        }
      }
      
      // Sammle alle Indizes, die bereits Teil einer L-Form sind
      const lShapeIndices = new Set();
      matches.forEach(match => {
        if (match.type === 'l-shape') {
          match.indices.forEach(index => lShapeIndices.add(index));
        }
      });
      
      // Kombiniere alle bereits verwendeten Indizes (5er-Matches + L-Form-Matches)
      const usedIndices = new Set([...foundFiveMatches, ...lShapeIndices]);
      
      // Horizontale Matches finden (3er, 4er) - NACH 5er-Matches und L-Form Matches
              for (let row = 0; row < this.boardHeight; row++) {
          for (let col = 0; col < this.boardWidth - 2; col++) {
            // Prüfe ob diese Position bereits Teil eines 5er-Matches oder L-Form ist
            const currentIndex = this.coordsToIndex(row, col);
            if (usedIndices.has(currentIndex)) {
              if (showDebug) console.log(`🔍 Überspringe Position [${row},${col}] - bereits Teil eines höherwertigen Matches`);
              continue;
            }
          
          // Prüfe auf 3er-Match
          if (col + 2 < this.boardWidth) {
            const index1 = this.coordsToIndex(row, col);
            const index2 = this.coordsToIndex(row, col + 1);
            const index3 = this.coordsToIndex(row, col + 2);
            
            // Prüfe ob alle drei Positionen bereits Teil eines höherwertigen Matches sind
            if (!usedIndices.has(index1) && !usedIndices.has(index2) && !usedIndices.has(index3) && 
                this.isValidMatch(index1, index2, index3, board)) {
              matches.push([index1, index2, index3]);
              if (showDebug) console.log(`🔍 3er-Match horizontal: [${row},${col}] bis [${row},${col+2}]`);
            }
          }
          
          // Prüfe auf 4er-Match
          if (col + 3 < this.boardWidth) {
            const index1 = this.coordsToIndex(row, col);
            const index2 = this.coordsToIndex(row, col + 1);
            const index3 = this.coordsToIndex(row, col + 2);
            const index4 = this.coordsToIndex(row, col + 3);
            
            // Prüfe ob alle vier Positionen bereits Teil eines höherwertigen Matches sind
            if (!usedIndices.has(index1) && !usedIndices.has(index2) && !usedIndices.has(index3) && !usedIndices.has(index4) &&
                this.isValidMatch(index1, index2, index3, board) && 
                this.isValidMatch(index2, index3, index4, board)) {
              matches.push([index1, index2, index3, index4]);
              if (showDebug) console.log(`🔍 4er-Match horizontal: [${row},${col}] bis [${row},${col+3}]`);
            }
          }
          

        }
      }
      
      // Vertikale Matches finden (3er, 4er) - NACH 5er-Matches und L-Form Matches
      for (let row = 0; row < this.boardHeight - 2; row++) {
        for (let col = 0; col < this.boardWidth; col++) {
          // Prüfe ob diese Position bereits Teil eines höherwertigen Matches ist
          const currentIndex = this.coordsToIndex(row, col);
          if (usedIndices.has(currentIndex)) {
            if (showDebug) console.log(`🔍 Überspringe Position [${row},${col}] - bereits Teil eines höherwertigen Matches`);
            continue;
          }
          
          // Prüfe auf 3er-Match
          if (row + 2 < this.boardHeight) {
          const index1 = this.coordsToIndex(row, col);
          const index2 = this.coordsToIndex(row + 1, col);
          const index3 = this.coordsToIndex(row + 2, col);
          
            // Prüfe ob alle drei Positionen bereits Teil eines höherwertigen Matches sind
            if (!usedIndices.has(index1) && !usedIndices.has(index2) && !usedIndices.has(index3) &&
                this.isValidMatch(index1, index2, index3, board)) {
              matches.push([index1, index2, index3]);
              if (showDebug) console.log(`🔍 3er-Match vertikal: [${row},${col}] bis [${row+2},${col}]`);
            }
          }
          
          // Prüfe auf 4er-Match
          if (row + 3 < this.boardHeight) {
            const index1 = this.coordsToIndex(row, col);
            const index2 = this.coordsToIndex(row + 1, col);
            const index3 = this.coordsToIndex(row + 2, col);
            const index4 = this.coordsToIndex(row + 3, col);
            
            // Prüfe ob alle vier Positionen bereits Teil eines höherwertigen Matches sind
            if (!usedIndices.has(index1) && !usedIndices.has(index2) && !usedIndices.has(index3) && !usedIndices.has(index4) &&
                this.isValidMatch(index1, index2, index3, board) && 
                this.isValidMatch(index2, index3, index4, board)) {
              matches.push([index1, index2, index3, index4]);
              if (showDebug) console.log(`🔍 4er-Match vertikal: [${row},${col}] bis [${row+3},${col}]`);
            }
          }
          

        }
      }
      
      if (showDebug) {
        console.log(`🔍 Gefundene Matches: ${matches.length}`, matches);
      }
      
      return matches;
    },
    
    // Hilfsmethode: Prüfe ob ein Tile ein Raketen-Power-up ist
    isRocketTile(tileType) {
      return tileType === 'rocket' || tileType === 'rocket-horizontal' || tileType === 'rocket-vertical';
    },
    
    // Hilfsmethode: Prüfe ob ein Tile ein Regenbogen-Power-up ist
    isRainbowTile(tileType) {
      return tileType === 'rainbow';
    },
    
    // Hilfsmethode: Prüfe ob ein Tile ein Power-up ist
    isPowerUpTile(tileType) {
      if (!tileType) return false;
      return this.isRocketTile(tileType) || tileType === 'bomb' || tileType === 'rocket-horizontal' || tileType === 'rocket-vertical' || this.isRainbowTile(tileType);
    },
    
    // Hilfsmethode: Debug-Ausgabe für Power-ups
    debugPowerUps() {
      console.log('🔍 Debug: Alle Power-ups auf dem Board:');
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i]) {
          const isPowerUp = this.isPowerUpTile(this.board[i].type);
          console.log(`🔍 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${isPowerUp}`);
          if (isPowerUp) {
            console.log(`🔍 ✅ Power-up erkannt: ${this.board[i].type} an Position ${i}`);
          }
        }
      }
    },
    
    // Hilfsmethode: Prüfe ob 3 Tiles einen gültigen Match bilden
    isValidMatch(index1, index2, index3, board) {
      // Prüfe ob alle Indizes gültig sind
      if (index1 === null || index2 === null || index3 === null) {
        return false;
      }
      
      // Prüfe ob alle Positionen gültig sind
      const pos1 = this.indexToCoords(index1);
      const pos2 = this.indexToCoords(index2);
      const pos3 = this.indexToCoords(index3);
      
      if (!this.isValidPosition(pos1.row, pos1.col) || 
          !this.isValidPosition(pos2.row, pos2.col) || 
          !this.isValidPosition(pos3.row, pos3.col)) {
        return false;
      }
      
      // Prüfe ob alle Tiles existieren
      if (!board[index1] || !board[index2] || !board[index3]) {
        return false;
      }
      
      // Prüfe ob alle Tiles den gleichen Typ haben
      const type1 = board[index1].type;
      const type2 = board[index2].type;
      const type3 = board[index3].type;
      
      // Power-ups können nicht gematcht werden
      if (this.isPowerUpTile(type1) || this.isPowerUpTile(type2) || this.isPowerUpTile(type3)) {
        return false;
      }
      
      return type1 === type2 && type2 === type3;
    },

    // Hilfsmethode: Prüfe ob 3 Tiles einen gültigen Match bilden (für L-Form)
    isValidMatchForLShape(index1, index2, index3, board) {
      // Prüfe ob alle Indizes gültig sind
      if (index1 === null || index2 === null || index3 === null) {
        return false;
      }
      
      // Prüfe ob alle Positionen gültig sind
      const pos1 = this.indexToCoords(index1);
      const pos2 = this.indexToCoords(index2);
      const pos3 = this.indexToCoords(index3);
      
      if (!this.isValidPosition(pos1.row, pos1.col) || 
          !this.isValidPosition(pos2.row, pos2.col) || 
          !this.isValidPosition(pos3.row, pos3.col)) {
        return false;
      }
      
      // Prüfe ob alle Tiles existieren
      if (!board[index1] || !board[index2] || !board[index3]) {
        return false;
      }
      
      // Prüfe ob alle Tiles den gleichen Typ haben
      const type1 = board[index1].type;
      const type2 = board[index2].type;
      const type3 = board[index3].type;
      
      // Power-ups können nicht gematcht werden
      if (this.isPowerUpTile(type1) || this.isPowerUpTile(type2) || this.isPowerUpTile(type3)) {
        return false;
      }
      
      return type1 === type2 && type2 === type3;
    },

    fixInitialMatches() {
      console.log('🔧 fixInitialMatches - Starte Korrektur initialer Matches');
      
      let attempts = 0;
      const maxAttempts = 100; // Erhöht für komplexere Matches
      
      do {
        // Finde alle initialen Matches
        const initialMatches = this.findMatchesOnBoard(this.board, false);
        if (initialMatches.length === 0) {
          console.log('🔧 Keine Matches mehr gefunden, Level ist bereit');
          break;
        }
        
        console.log(`🔧 Versuch ${attempts + 1}: ${initialMatches.length} Matches gefunden`);
        
        // Wähle einen zufälligen Match
        if (initialMatches.length === 0) {
          console.log('🔧 Keine Matches mehr gefunden, Level ist bereit');
          break;
        }
        
        const randomMatch = initialMatches[Math.floor(Math.random() * initialMatches.length)];
        
        // Prüfe ob der Match gültig ist
        if (!Array.isArray(randomMatch) || randomMatch.length === 0) {
          console.warn('⚠️ Ungültiger Match gefunden, überspringe diesen Versuch');
          attempts++;
          continue;
        }
        
        const randomTileIndex = randomMatch[Math.floor(Math.random() * randomMatch.length)];
        
        // Prüfe ob der Index gültig ist und ein Tile existiert
        if (randomTileIndex === null || randomTileIndex === undefined || 
            randomTileIndex < 0 || randomTileIndex >= this.board.length || 
            !this.board[randomTileIndex]) {
          console.warn(`⚠️ Ungültiger Tile-Index: ${randomTileIndex}, überspringe diesen Versuch`);
          attempts++;
          continue;
        }
        
        const currentType = this.board[randomTileIndex].type;
        
        // Wähle einen anderen Tile-Typ
        const availableTypes = this.tileTypes.filter(type => type !== currentType);
        if (availableTypes.length === 0) {
          console.warn('⚠️ Keine alternativen Tile-Typen verfügbar, überspringe diesen Versuch');
          attempts++;
          continue;
        }
        
        const newType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
        
        // Ändere den Tile-Typ
        this.board[randomTileIndex].type = newType;
        
        console.log(`🔧 Änderte Tile an Position ${randomTileIndex} von ${currentType} zu ${newType}`);
        
        attempts++;
      } while (attempts < maxAttempts);
      
      if (attempts >= maxAttempts) {
        console.warn('⚠️ Konnte initiale Matches nicht vollständig korrigieren nach', maxAttempts, 'Versuchen');
      } else {
        console.log(`🔧 Initiale Matches in ${attempts} Versuchen korrigiert`);
      }
    },

    startDragEffect(event, index) {
      // Erstelle ein visuelles Drag-Element
      this.dragElement = document.createElement('div');
      this.dragElement.className = 'drag-tile';
      this.dragElement.innerHTML = `
        <div class="tile-content">
          <span class="tile-icon">${this.getTileSymbol(this.board[index].type)}</span>
        </div>
      `;
      
      // Position des ursprünglichen Tiles ermitteln
      const originalTile = event.target;
      const rect = originalTile.getBoundingClientRect();
      
      // Drag-Element positionieren
      this.dragElement.style.position = 'fixed';
      this.dragElement.style.left = rect.left + 'px';
      this.dragElement.style.top = rect.top + 'px';
      this.dragElement.style.width = rect.width + 'px';
      this.dragElement.style.height = rect.height + 'px';
      this.dragElement.style.zIndex = '1000';
      this.dragElement.style.pointerEvents = 'none';
      
      // Offset für präzise Positionierung berechnen
      this.dragOffsetX = event.clientX - rect.left;
      this.dragOffsetY = event.clientY - rect.top;
      
      // Drag-Element zum DOM hinzufügen
      document.body.appendChild(this.dragElement);
      
      // Maus/Touch-Bewegung verfolgen (mit korrektem this-Binding)
      this.boundMouseMoveHandler = this.updateDragEffect.bind(this);
      this.boundTouchMoveHandler = this.updateDragEffect.bind(this);
      document.addEventListener('mousemove', this.boundMouseMoveHandler);
      document.addEventListener('touchmove', this.boundTouchMoveHandler);
      
      // Ursprüngliches Tile ausblenden
      originalTile.style.opacity = '0.3';
      

    },

    updateDragEffect(event) {
      if (!this.dragElement || !this.isDragging) return;
      
      const clientX = event.clientX || event.touches?.[0]?.clientX;
      const clientY = event.clientY || event.touches?.[0]?.clientY;
      
      if (clientX && clientY) {
        // Drag-Element mit Maus/Touch bewegen
        this.dragElement.style.left = (clientX - this.dragOffsetX) + 'px';
        this.dragElement.style.top = (clientY - this.dragOffsetY) + 'px';
      }
    },

    endDragEffect() {
      // Event-Listener entfernen
      if (this.boundMouseMoveHandler) {
        document.removeEventListener('mousemove', this.boundMouseMoveHandler);
        this.boundMouseMoveHandler = null;
      }
      if (this.boundTouchMoveHandler) {
        document.removeEventListener('touchmove', this.boundTouchMoveHandler);
        this.boundTouchMoveHandler = null;
      }
      
      // Document-Level Event-Handler entfernen
      document.removeEventListener('mouseup', this.handleDocumentMouseUp, true);
      document.removeEventListener('touchend', this.handleDocumentTouchEnd, true);
      
      
      // Drag-Element entfernen
      if (this.dragElement) {
        document.body.removeChild(this.dragElement);
        this.dragElement = null;
      }
      
      // Ursprüngliches Tile wieder einblenden
      if (this.dragStartIndex !== null) {
        const originalTile = document.querySelector(`[data-index="${this.dragStartIndex}"]`);
        if (originalTile) {
          originalTile.style.opacity = '1';
        }
      }
    },

    async swapTiles(index1, index2) {
      // Verhindere Swaps während der Fall-Animation
      if (this.isFalling) {
        return;
      }
      
      // WICHTIG: Prüfe auf Regenbogen-Tile Tausch (vor dem Tausch)
      // Prüfe beide Kombinationen der ursprünglichen Tiles
      const rainbowSwapResult = await this.handleRainbowSwap(this.board[index1], this.board[index2]);
      if (rainbowSwapResult) {
        // Regenbogen-Tausch erfolgreich - Zug-Zähler wird bereits in handleRainbowSwap erhöht
        // ABER: Wir müssen trotzdem die Matches verarbeiten, die durch den Regenbogen-Tausch entstanden sind
        console.log('🌈 Regenbogen-Tausch erfolgreich, verarbeite entstandene Matches...');
        
        // Warte kurz, damit die Animation abgeschlossen ist
        await new Promise(resolve => setTimeout(resolve, 100));
        
        // Prüfe auf Matches nach dem Regenbogen-Tausch
        const matchesAfterRainbow = this.findMatchesOnBoard(this.board, false);
        if (matchesAfterRainbow.length > 0) {
          console.log(`🌈 ${matchesAfterRainbow.length} Matches nach Regenbogen-Tausch gefunden, verarbeite sie...`);
          await this.handleMatches(matchesAfterRainbow, true); // true = Spieler-Zug
        }
        
        return; // Beende hier, da Regenbogen-Tausch bereits verarbeitet wurde
      }
      
      // Tausche die Tiles
      const temp = this.board[index1];
      this.board[index1] = this.board[index2];
      this.board[index2] = temp;
      
      // Spiele Move-Sound
      this.playSound('move');
      
      // Erhöhe den Zug-Zähler nur für normale Swaps
      this.moves++;
      this.movesLeft--;
      
      // Prüfe auf normale Matches nach dem Swap
      const matches = this.findMatchesOnBoard(this.board, false); // Reduziere Debug-Ausgaben
      
      if (matches.length > 0) {
        await this.handleMatches(matches, true); // true = Spieler-Zug
      } else {
        // Keine Matches - tausche zurück
        const tempBack = this.board[index1];
        this.board[index1] = this.board[index2];
        this.board[index2] = tempBack;
        
        // Zug rückgängig machen
        this.moves--;
        this.movesLeft++;
        
        // Wichtig: Auch ohne Matches Level-Objekte prüfen
        // (falls der Spieler bereits alle Ziele erreicht hat)
        // Nur prüfen wenn der Spieler bereits gespielt hat UND das Level nicht initialisiert wird
        if (this.moves > 0 && !this.isInitializingLevel) {
        this.checkLevelObjectives();
        }
      }
    },

    // Verarbeite gefundene Matches
    async handleMatches(matches, isPlayerMove = false) {
      if (matches.length === 0) {
        console.log('🔧 Keine Matches zum Verarbeiten');
        return;
      }
      
      console.log(`🔧 Verarbeite ${matches.length} Matches...`);
      
      // Debug: Zeige alle gefundenen Matches
      console.log('🔧 Debug: Alle gefundenen Matches:');
      matches.forEach((match, index) => {
        if (match.type === 'l-shape') {
          console.log(`  Match ${index + 1}: L-Form ${match.direction} an Ecke ${match.corner}`);
        } else if (Array.isArray(match)) {
          console.log(`  Match ${index + 1}: ${match.length}er-Match [${match.join(', ')}]`);
        }
      });
      
      // Sammle alle zu entfernenden Tile-Indizes (aus 3er-Matches UND 4er-Matches)
      const tilesToRemove = new Set();
      
      // Sammle alle Power-up-Positionen, die NICHT entfernt werden dürfen
      const powerUpPositions = new Set();
      
      // Verarbeite zuerst L-Form-Matches (Bomben)
      matches.forEach((match, matchIndex) => {
        if (match.type === 'l-shape') {
          // L-Form Match: Erstelle Bombe an der Ecke
          console.log(`🔧 L-Form Match ${matchIndex + 1}: ${match.direction} an Ecke ${match.corner}`);
          
          // Alle Tiles der L-Form entfernen (außer der Ecke, wo die Bombe ist)
          match.indices.forEach(tileIndex => {
            if (tileIndex !== match.corner) {
              tilesToRemove.add(tileIndex);
            }
          });
          
          // Bombe wird später in createPowerUpsForMatches erstellt
          console.log(`💣 Bombe wird später an Position ${match.corner} erstellt`);
        }
      });
      
      // Verarbeite dann normale Matches (3er, 4er, 5er) und berechne Punkte
      let totalMatchPoints = 0;
      matches.forEach((match, matchIndex) => {
        if (Array.isArray(match) && match.length >= 3) {
          // Normale Matches (3er, 4er, 5er)
          console.log(`🔧 ${match.length}er-Match ${matchIndex + 1}: [${match.join(', ')}]`);
          
          // Berechne Punkte für diesen Match
          let matchPoints = 0;
          if (match.length === 3) {
            matchPoints = 10; // 3er-Match: 10 Punkte
            console.log(`🔧 3er-Match: +${matchPoints} Punkte`);
          } else if (match.length === 4) {
            matchPoints = 20; // 4er-Match (Rakete): 20 Punkte
            console.log(`🔧 4er-Match (Rakete): +${matchPoints} Punkte`);
          } else if (match.length === 5) {
            // Prüfe ob es ein Regenbogen-Match ist
            const hasRainbow = match.some(tileIndex => 
              this.board[tileIndex] && this.board[tileIndex].type === 'rainbow'
            );
            if (hasRainbow) {
              matchPoints = 50; // 5er-Match mit Regenbogen: 50 Punkte
              console.log(`🔧 5er-Match mit Regenbogen: +${matchPoints} Punkte`);
            } else {
              matchPoints = 35; // 5er-Match (Bombe): 35 Punkte
              console.log(`🔧 5er-Match (Bombe): +${matchPoints} Punkte`);
            }
          }
          
          totalMatchPoints += matchPoints;
          
          match.forEach(tileIndex => {
            // WICHTIG: Power-ups dürfen NIE entfernt werden
            if (this.board[tileIndex] && this.isPowerUpTile(this.board[tileIndex].type)) {
              console.log(`🔧 Power-up ${this.board[tileIndex].type} an Position ${tileIndex} wird NICHT entfernt (Typ-Prüfung)`);
              return; // Überspringe dieses Tile
            }
            
            // Nur normale Tiles zur Entfernung hinzufügen
            console.log(`🔧 Füge Tile ${this.board[tileIndex].type} an Position ${tileIndex} zur Entfernung hinzu`);
            tilesToRemove.add(tileIndex);
          });
        }
      });
      
      // Füge die Match-Punkte zum Level-Score hinzu
      if (totalMatchPoints > 0) {
        this.levelScore += totalMatchPoints;
        this.score += totalMatchPoints;
        console.log(`🎯 Match-Punkte hinzugefügt: +${totalMatchPoints} Punkte (Level: ${this.levelScore}, Gesamt: ${this.score})`);
      }
      
      // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
      if (isPlayerMove && !this.isInitializingLevel) {
      this.matchesMade += 1;
        console.log(`🎯 Match-Zähler erhöht: ${this.matchesMade} Matches gemacht`);
      }
      
      // Debug: Zeige alle Tiles, die zur Entfernung hinzugefügt wurden
      console.log('🔧 Debug: Alle Tiles, die zur Entfernung hinzugefügt wurden:');
      tilesToRemove.forEach(index => {
        if (this.board[index]) {
          console.log(`  - Position ${index}: ${this.board[index].type}`);
        }
      });
      
      if (tilesToRemove.size === 0) {
        console.log('🔧 Keine Tiles zum Entfernen gefunden');
        return;
      }
      
      console.log(`🔧 ${tilesToRemove.size} Tiles zum Entfernen gefunden`);
      
      // Debug: Zeige alle Tiles, die entfernt werden sollen
      console.log('🔧 Debug: Tiles die entfernt werden sollen:');
      tilesToRemove.forEach(index => {
        if (this.board[index]) {
          console.log(`  - Position ${index}: ${this.board[index].type}`);
        }
      });
      
      // Starte Schrumpf-Animation für alle zu entfernenden Tiles
      console.log(`🔧 Starte Schrumpf-Animation für ${tilesToRemove.size} Tiles...`);
      await this.animateTileRemoval(Array.from(tilesToRemove));
      
      // Entferne alle gematchten Tiles nach der Animation
      tilesToRemove.forEach(index => {
        if (this.board[index]) {
          console.log(`🔧 Entferne Tile ${this.board[index].type} an Position ${index}`);
          this.board[index] = null;
        }
      });
      
      // Debug: Zeige alle Power-ups nach der Tile-Entfernung
      console.log('🔧 Debug: Alle Power-ups nach Tile-Entfernung:');
      this.debugPowerUps();
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
      
      console.log(`🔧 ${tilesToRemove.size} einzigartige Tiles aus 3er-Matches entfernt`);
      
      // JETZT erst Power-ups erstellen, nachdem die Tiles entfernt wurden
      console.log('🔧 Erstelle Power-ups nach der Tile-Entfernung...');
      const powerUpsCreated = await this.createPowerUpsForMatches(matches);
      
      // Wenn Raketen erstellt wurden, lass sie im nächsten Zug starten
      if (powerUpsCreated && powerUpsCreated.rockets && powerUpsCreated.rockets.length > 0) {
        console.log(`🚀 ${powerUpsCreated.rockets.length} Raketen erstellt - werden im nächsten Zug aktiviert`);
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
        
        // Warte kurz, damit die Rakete sichtbar wird
        await this.wait(300);
        
        // KEINE automatische Aktivierung - Raketen bleiben auf dem Board
        // und werden erst durch Spieler-Aktionen aktiviert
      }
      
      // Debug: Zeige alle Power-ups nach der Erstellung
      console.log('🔧 Debug: Alle Power-ups nach createPowerUpsForMatches:');
      this.debugPowerUps();
      
      // Debug: Zeige alle Power-ups im Board nach der Erstellung
      console.log('🔧 Debug: Board nach Power-up-Erstellung:');
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.isPowerUpTile(this.board[i].type)) {
          console.log(`🔧 Position ${i}: Power-up ${this.board[i].type}`);
          console.log(`🔧 Board[${i}] = ${JSON.stringify(this.board[i])}`);
        }
      }
      
      // Debug: Zeige alle Power-ups im Template
      console.log('🔧 Debug: Power-ups im Template:');
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i]) {
          console.log(`🔧 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${this.isPowerUpTile(this.board[i].type)}, isRocketTile: ${this.isRocketTile(this.board[i].type)}`);
          if (this.isPowerUpTile(this.board[i].type)) {
            console.log(`🔧 ✅ Power-up erkannt: ${this.board[i].type} an Position ${i}`);
          }
        }
      }
      
      // Debug: Zeige alle Power-ups vor dem Fall-Down
      console.log('🔧 Debug: Alle Power-ups vor dem Fall-Down:');
      this.debugPowerUps();
      
      // Debug: Zeige alle Power-ups nach dem Fall-Down
      console.log('🔧 Debug: Alle Power-ups nach dem Fall-Down:');
      this.debugPowerUps();
      
      // Führe Fall-Down-Logik aus
      await this.fallTilesDown();
      
      // Debug: Zeige alle Power-ups nach dem Fall-Down
      console.log('🔧 Debug: Alle Power-ups nach dem Fall-Down:');
      this.debugPowerUps();
      
      // Fülle leere gültige Felder mit neuen Tiles auf
      await this.checkAndFillEmptyValidFields();
      
      // Debug: Zeige alle Power-ups nach dem Füllen
      console.log('🔧 Debug: Alle Power-ups nach dem Füllen:');
      this.debugPowerUps();
      
      // Prüfe ob Power-ups erstellt wurden - wenn ja, keine Cascade-Matches prüfen
      // Verwende den Rückgabewert von createPowerUpsForMatches
      if (!powerUpsCreated || powerUpsCreated.count === 0) {
        // Nur Cascade-Matches prüfen, wenn keine Power-ups erstellt wurden
        await this.checkForCascadeMatches();
      } else {
        console.log(`🔧 ${powerUpsCreated.count} Power-ups erstellt - überspringe Cascade-Match-Prüfung`);
        
        // Debug: Zeige alle Power-ups nach der Verarbeitung
        console.log('🔧 Debug: Alle Power-ups nach Power-up-Verarbeitung:');
        this.debugPowerUps();
        
              // Debug: Zeige alle Power-ups im Template nach der Verarbeitung
      console.log('🔧 Debug: Power-ups im Template nach Verarbeitung:');
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i]) {
          const isPowerUp = this.isPowerUpTile(this.board[i].type);
          console.log(`🔧 Position ${i}: Tile ${this.board[i].type}, isPowerUpTile: ${isPowerUp}`);
          if (isPowerUp) {
            console.log(`🔧 ✅ Power-up im Template: ${this.board[i].type} an Position ${i}`);
          }
        }
      }
      
      // WICHTIG: Prüfe Level-Objekte nach dem Verarbeiten der Matches
      if (isPlayerMove && !this.isInitializingLevel) {
        console.log('🎯 Prüfe Level-Objekte nach Match-Verarbeitung...');
      this.checkLevelObjectives();
      }
      
      }
    },
    
    // Fall-Down-Logik: Bewege Tiles nach unten in leere Positionen
    async fallTilesDown() {
      console.log('🔧 Starte Fall-Down-Logik...');
      
      let hasChanges = true;
      let iteration = 0;
      const maxIterations = 10; // Verhindert Endlosschleifen
      
      while (hasChanges && iteration < maxIterations) {
        iteration++;
        console.log(`🔧 Fall-Down Iteration ${iteration}...`);
        
        hasChanges = false;
        
        // 1. Von unten nach oben leere Felder finden und Tiles nach unten verschieben
        for (let col = 0; col < this.boardWidth; col++) {
          console.log(`🔧 Prüfe Spalte ${col}...`);
          
          // Finde alle leeren Positionen in dieser Spalte von unten nach oben
          for (let row = this.boardHeight - 1; row >= 0; row--) {
            const index = this.coordsToIndex(row, col);
            
            // Wenn Position leer ist, prüfe ob sie im Layout gültig ist
            if (!this.board[index]) {
              if (this.currentLevelData && this.currentLevelData.boardLayout) {
                const layoutRows = this.currentLevelData.boardLayout.split('\n');
                if (row < layoutRows.length && col < layoutRows[row].length) {
                  const targetChar = layoutRows[row][col];
                  if (targetChar !== 'x') {
                    console.log(`🔧 Position [${row}, ${col}] ist ungültig im Layout (${targetChar}) - überspringe`);
                    continue; // Überspringe ungültige Positionen
                  }
                }
              }
              
              console.log(`🔧 Leere Position gefunden: [${row}, ${col}] -> Index ${index}`);
              
              // Suche nach oben nach einem Tile
              let tileFound = false;
              for (let searchRow = row - 1; searchRow >= 0; searchRow--) {
                const searchIndex = this.coordsToIndex(searchRow, col);
                
                if (this.board[searchIndex] && !this.isPowerUpTile(this.board[searchIndex].type)) {
                  console.log(`🔧 Tile ${this.board[searchIndex].type} gefunden an [${searchRow}, ${col}] -> verschiebe nach [${row}, ${col}]`);
                  
                  // Verschiebe Tile nach unten
                  this.board[index] = this.board[searchIndex];
                  this.board[searchIndex] = null;
                  
                  // Aktualisiere DOM
                  this.$forceUpdate();
                  
                  // Warte kurz für Animation
                  await this.wait(500);
                  
                  hasChanges = true;
                  tileFound = true;
                  break;
                }
              }
              
              if (!tileFound) {
                console.log(`🔧 Kein Tile über Position [${row}, ${col}] gefunden`);
              }
            }
          }
        }
        
        // 2. Oberste Zeile nach fehlenden Feldern untersuchen und auffüllen
        if (hasChanges) {
          console.log('🔧 Fülle oberste Zeile auf...');
          
          for (let col = 0; col < this.boardWidth; col++) {
            const index = this.coordsToIndex(0, col);
            
            // Wenn oberste Position leer ist, prüfe ob sie im Layout gültig ist
            if (!this.board[index]) {
              if (this.currentLevelData && this.currentLevelData.boardLayout) {
                const layoutRows = this.currentLevelData.boardLayout.split('\n');
                if (0 < layoutRows.length && col < layoutRows[0].length) {
                  const targetChar = layoutRows[0][col];
                  if (targetChar !== 'x') {
                    console.log(`🔧 Oberste Position [0, ${col}] ist ungültig im Layout (${targetChar}) - überspringe`);
                    continue;
                  }
                }
              }
              
              // Erstelle neues Tile
              const newTile = this.createRandomTile();
              this.board[index] = newTile;
              console.log(`🔧 Neues Tile ${newTile.type} an oberster Position [0, ${col}] hinzugefügt`);
              hasChanges = true;
            }
          }
          
          // Aktualisiere DOM nach dem Auffüllen
          this.$forceUpdate();
          await this.wait(100);
        }
        
        console.log(`🔧 Iteration ${iteration} abgeschlossen - Änderungen: ${hasChanges}`);
      }
      
      if (iteration >= maxIterations) {
        console.log('⚠️ Maximale Anzahl von Fall-Down Iterationen erreicht');
      }
      
      console.log('🔧 Fall-Down-Logik abgeschlossen');
    },
    
    // Hilfsfunktion: Zeige den aktuellen Board-Zustand in der Konsole
    printBoardState() {
      console.log('🔧 Board-Zustand:');
      for (let row = 0; row < this.boardHeight; row++) {
        let rowStr = '';
        for (let col = 0; col < this.boardWidth; col++) {
          const index = this.coordsToIndex(row, col);
          const tile = this.board[index];
          if (tile) {
            rowStr += `[${tile.type}] `;
          } else {
            rowStr += '[ ] ';
          }
        }
        console.log(`  Zeile ${row}: ${rowStr}`);
      }
    },
    
    // Fülle leere Positionen mit neuen Tiles auf
    async fillEmptyPositions() {
      console.log('🔧 Fülle leere Positionen mit neuen Tiles auf...');
      
      let newTilesAdded = 0;
      const newTilePositions = [];
      
      // Fülle nur die obersten leeren Zeilen mit neuen Tiles
      for (let col = 0; col < this.boardWidth; col++) {
        // Finde die oberste leere Position in dieser Spalte
        let topEmptyRow = -1;
        for (let row = 0; row < this.boardHeight; row++) {
          const index = this.coordsToIndex(row, col);
          if (!this.board[index]) {
            topEmptyRow = row;
            break;
          }
        }
        
        // Wenn eine leere Position gefunden wurde, prüfe ob sie im Layout gültig ist
        if (topEmptyRow !== -1) {
          // Prüfe, ob das Feld im board_layout gültig ist (nicht 'o')
          if (this.currentLevelData && this.currentLevelData.boardLayout) {
            const layout = this.currentLevelData.boardLayout;
            const layoutRows = layout.split('\n');
            
            // Prüfe, ob das Feld im Layout gültig ist
            if (topEmptyRow < layoutRows.length && col < layoutRows[topEmptyRow].length) {
              const targetChar = layoutRows[topEmptyRow][col];
              
              // Nur neues Tile hinzufügen, wenn das Feld 'x' ist (gültig)
              if (targetChar === 'x') {
                const index = this.coordsToIndex(topEmptyRow, col);
                const newTile = this.createRandomTile();
                this.board[index] = newTile;
                newTilesAdded++;
                newTilePositions.push({ index, row: topEmptyRow, col, type: newTile.type });
                
                console.log(`🔧 Neues Tile ${newTile.type} an Position [${topEmptyRow}, ${col}] hinzugefügt`);
              } else {
                console.log(`🔧 Position [${topEmptyRow}, ${col}] wird nicht gefüllt - Layout zeigt '${targetChar}'`);
              }
            }
          } else {
            // Fallback: Wenn kein Layout vorhanden, normale Logik verwenden
            const index = this.coordsToIndex(topEmptyRow, col);
            const newTile = this.createRandomTile();
            this.board[index] = newTile;
            newTilesAdded++;
            newTilePositions.push({ index, row: topEmptyRow, col, type: newTile.type });
            
            console.log(`🔧 Neues Tile ${newTile.type} an Position [${topEmptyRow}, ${col}] hinzugefügt`);
          }
        }
      }
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
      
      // Führe Animation für neue Tiles aus
      if (newTilePositions.length > 0) {
        await this.animateNewTilesAppearing(newTilePositions);
      }
      
      console.log(`🔧 ${newTilesAdded} neue Tiles hinzugefügt`);
      
      // WICHTIG: Nach dem Füllen der leeren Positionen das Brett auf Matches überprüfen
      if (newTilesAdded > 0) {
        console.log('🔍 Überprüfe das Brett auf Matches nach dem Füllen der leeren Positionen...');
        
        // Warte kurz, damit die neuen Tiles vollständig angezeigt werden
        await this.wait(300);
        
        // Prüfe auf Matches auf dem aktuellen Board
        const matchesAfterFill = this.findMatchesOnBoard(this.board, false);
        
        if (matchesAfterFill.length > 0) {
          console.log(`🔍 ${matchesAfterFill.length} Match(es) nach dem Füllen gefunden - starte automatische Behandlung`);
          
          // Behandle die gefundenen Matches automatisch (kein Spieler-Move)
          await this.handleMatches(matchesAfterFill, false);
          
          // WICHTIG: Rekursiver Aufruf, falls durch die Matches neue leere Positionen entstehen
          // Das verhindert Endlosschleifen durch max. 3 Rekursionen
          if (this.recursionDepth === undefined) {
            this.recursionDepth = 0;
          }
          
          if (this.recursionDepth < 3) {
            this.recursionDepth++;
            console.log(`🔄 Rekursiver Aufruf ${this.recursionDepth}/3 - prüfe auf weitere leere Positionen`);
            
            // Prüfe erneut auf leere Positionen und fülle sie auf
            await this.checkAndFillEmptyValidFields();
            
            this.recursionDepth--;
          } else {
            console.log('⚠️ Maximale Rekursionstiefe erreicht - stoppe automatische Match-Behandlung');
          }
        } else {
          console.log('✅ Keine Matches nach dem Füllen gefunden - Board ist bereit');
        }
      }
    },
    
    // Erstelle Power-ups für 4er-Matches, 5er-Matches und L-Form-Matches
    async createPowerUpsForMatches(matches) {
      console.log('🔧 Prüfe auf Power-up-Erstellung...');
      
      let powerUpsCreated = 0;
      const bombs = [];
      const rockets = [];
      const rainbows = [];
      
      // Sammle alle Positionen, die bereits von höherwertigen Power-ups verwendet werden
      const usedPositions = new Set();
      
      // Verarbeite zuerst 5er-Matches (höchste Priorität)
      matches.forEach(match => {
        if (Array.isArray(match) && match.length === 5) {
          console.log(`🔧 5er-Match gefunden: ${match.join(', ')} - erstelle Regenbogen-Tile`);
          
          // Regenbogen-Tile erscheint an der Position des mittleren Tiles (Index 2)
          const rainbowIndex = match[2];
          
          // Markiere alle Positionen des 5er-Matches als verwendet
          match.forEach(pos => usedPositions.add(pos));
          
          // Erstelle Regenbogen-Tile
          this.board[rainbowIndex] = { type: 'rainbow' };
          
          console.log(`🌈 Regenbogen-Tile an Position ${rainbowIndex} erstellt`);
          console.log(`🔧 Board[${rainbowIndex}] = ${JSON.stringify(this.board[rainbowIndex])}`);
          powerUpsCreated++;
          rainbows.push(rainbowIndex);
        }
      });
      
      // Verarbeite dann L-Form-Matches (mittlere Priorität)
      matches.forEach(match => {
        if (match.type === 'l-shape') {
          console.log(`🔧 L-Form-Match gefunden: ${match.direction} an Ecke ${match.corner} - erstelle Bombe`);
          
          // Prüfe ob die Ecke bereits von einem 5er-Match verwendet wird
          if (usedPositions.has(match.corner)) {
            console.log(`🔧 Überspringe L-Form-Match - Position ${match.corner} bereits von 5er-Match verwendet`);
            return;
          }
          
          // Markiere die Ecke als verwendet
          usedPositions.add(match.corner);
          
          // Bombe an der Ecke erstellen
          this.board[match.corner] = { type: 'bomb' };
          
          console.log(`💣 Bombe an Position ${match.corner} erstellt`);
          console.log(`🔧 Board[${match.corner}] = ${JSON.stringify(this.board[match.corner])}`);
          powerUpsCreated++;
          bombs.push(match.corner);
        }
      });
      
      // Verarbeite zuletzt 4er-Matches (niedrigste Priorität)
      matches.forEach(match => {
        if (Array.isArray(match) && match.length === 4) {
          console.log(`🔧 4er-Match gefunden: ${match.join(', ')} - erstelle Rakete`);
          
          // Rakete erscheint an der Position des zweiten Tiles
          const rocketIndex = match[1];
          
          // Prüfe ob die Position bereits von einem höherwertigen Power-up verwendet wird
          if (usedPositions.has(rocketIndex)) {
            console.log(`🔧 Überspringe 4er-Match - Position ${rocketIndex} bereits von höherwertigem Power-up verwendet`);
            return;
          }
          
          // Markiere die Position als verwendet
          usedPositions.add(rocketIndex);
          
          // Erstelle Rakete basierend auf der Richtung des Matches
          const rocketType = this.determineRocketType(match);
          this.board[rocketIndex] = { type: rocketType };
          
          console.log(`🚀 Rakete ${rocketType} an Position ${rocketIndex} erstellt`);
          console.log(`🔧 Board[${rocketIndex}] = ${JSON.stringify(this.board[rocketIndex])}`);
          powerUpsCreated++;
          rockets.push(rocketIndex);
        }
      });
      
      // Aktualisiere die Anzeige nach der Power-up-Erstellung
      if (powerUpsCreated > 0) {
        this.$forceUpdate();
        console.log(`🔧 ${powerUpsCreated} Power-ups erstellt und Board aktualisiert`);
      }
      
      // Gib detaillierte Informationen über erstellte Power-ups zurück
      return {
        count: powerUpsCreated,
        bombs: bombs,
        rockets: rockets,
        rainbows: rainbows
      };
    },
    
    // Bestimme den Raketen-Typ basierend auf der Match-Richtung
    determineRocketType(match) {
      // Prüfe ob der Match horizontal oder vertikal ist
      const firstPos = this.indexToCoords(match[0]);
      const secondPos = this.indexToCoords(match[1]);
      
      if (firstPos.row === secondPos.row) {
        // Horizontaler Match - horizontale Rakete
        return 'rocket-horizontal';
      } else {
        // Vertikaler Match - vertikale Rakete
        return 'rocket-vertical';
      }
    },
    
    // Prüfe und fülle alle leeren gültigen Felder nach dem Fallen
    async checkAndFillEmptyValidFields() {
      console.log('🔧 Prüfe alle leeren gültigen Felder...');
      
      let hasEmptyValidFields = false;
      const emptyValidFields = [];
      
      // Gehe durch alle Positionen im Board
      for (let row = 0; row < this.boardHeight; row++) {
        for (let col = 0; col < this.boardWidth; col++) {
          const index = this.coordsToIndex(row, col);
          
          // Wenn Position leer ist, prüfe ob sie im Layout gültig ist
          if (!this.board[index]) {
            if (this.currentLevelData && this.currentLevelData.boardLayout) {
              const layout = this.currentLevelData.boardLayout;
              const layoutRows = layout.split('\n');
              
              // Prüfe, ob das Feld im Layout gültig ist (nicht 'o')
              if (row < layoutRows.length && col < layoutRows[row].length) {
                const targetChar = layoutRows[row][col];
                
                if (targetChar === 'x') {
                  // Gültiges Feld ist leer - muss gefüllt werden
                  emptyValidFields.push({ index, row, col });
                  hasEmptyValidFields = true;
                  console.log(`🔧 Gültiges Feld [${row}, ${col}] ist leer und muss gefüllt werden`);
                }
              }
            }
          } else if (this.board[index] && this.isPowerUpTile(this.board[index].type)) {
            // Position enthält bereits ein Power-up - nicht überschreiben
            console.log(`🔧 Position [${row}, ${col}] enthält bereits Power-up ${this.board[index].type} - wird nicht überschrieben`);
          }
        }
      }
      
      if (hasEmptyValidFields) {
        console.log(`🔧 ${emptyValidFields.length} leere gültige Felder gefunden - starte erneuten Fall-Prozess`);
        
        // Fülle alle leeren gültigen Felder mit neuen Tiles
        for (const field of emptyValidFields) {
          const newTile = this.createRandomTile();
          this.board[field.index] = newTile;
          console.log(`🔧 Neues Tile ${newTile.type} an Position [${field.row}, ${field.col}] hinzugefügt`);
        }
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
        
        // Führe Animation für neue Tiles aus
        await this.animateNewTilesAppearing(emptyValidFields.map(field => ({ 
          index: field.index, 
          row: field.row, 
          col: field.col, 
          type: this.board[field.index].type 
        })));
        
        console.log(`🔧 Alle leeren gültigen Felder gefüllt`);
        
        // WICHTIG: Nach dem Füllen der leeren gültigen Felder das Brett auf Matches überprüfen
        console.log('🔍 Überprüfe das Brett auf Matches nach dem Füllen der leeren gültigen Felder...');
        
        // Warte kurz, damit die neuen Tiles vollständig angezeigt werden
        await this.wait(300);
        
        // Prüfe auf Matches auf dem aktuellen Board
        const matchesAfterFill = this.findMatchesOnBoard(this.board, false);
        
        if (matchesAfterFill.length > 0) {
          console.log(`🔍 ${matchesAfterFill.length} Match(es) nach dem Füllen der leeren gültigen Felder gefunden - starte automatische Behandlung`);
          
          // Behandle die gefundenen Matches automatisch (kein Spieler-Move)
          await this.handleMatches(matchesAfterFill, false);
          
          // WICHTIG: Rekursiver Aufruf, falls durch die Matches neue leere Positionen entstehen
          // Das verhindert Endlosschleifen durch max. 3 Rekursionen
          if (this.recursionDepth === undefined) {
            this.recursionDepth = 0;
          }
          
          if (this.recursionDepth < 3) {
            this.recursionDepth++;
            console.log(`🔄 Rekursiver Aufruf ${this.recursionDepth}/3 - prüfe auf weitere leere gültige Felder`);
            
            // Prüfe erneut auf leere gültige Felder und fülle sie auf
            await this.checkAndFillEmptyValidFields();
            
            this.recursionDepth--;
          } else {
            console.log('⚠️ Maximale Rekursionstiefe erreicht - stoppe automatische Match-Behandlung');
          }
        } else {
          console.log('✅ Keine Matches nach dem Füllen der leeren gültigen Felder gefunden - Board ist bereit');
        }
      } else {
        console.log('🔧 Alle gültigen Felder enthalten Tiles - Board ist vollständig');
      }
    },
    
    // Animierte Entfernung von Tiles mit Schrumpf-Effekt
    async animateTileRemoval(tileIndices) {
      console.log(`🎬 Starte Schrumpf-Animation für ${tileIndices.length} Tiles...`);
      
      // Sammle alle DOM-Elemente der zu entfernenden Tiles
      const tileElements = tileIndices.map(index => {
        const element = document.querySelector(`[data-index="${index}"]`);
        if (element) {
          // Füge CSS-Klasse für die Animation hinzu
          element.classList.add('removing');
          console.log(`🎬 CSS-Klasse 'removing' zu Tile ${index} hinzugefügt`);
        }
        return element;
      }).filter(element => element !== null);
      
      if (tileElements.length === 0) {
        console.warn(`⚠️ Keine DOM-Elemente für Animation gefunden`);
        return;
      }
      
      console.log(`🎬 ${tileElements.length} DOM-Elemente für Animation vorbereitet`);
      
      // Warte auf die Animation (0,75 Sekunden)
      await this.wait(750);
      
      // Entferne die CSS-Klassen
      tileElements.forEach(element => {
        element.classList.remove('removing');
      });
      
      console.log(`🎬 Schrumpf-Animation abgeschlossen`);
    },
    
    // Animierte Fall-Animation für Tiles (einfache Animation nach dem Verschieben im Board)
    async animateTilesFalling(tilesToFall) {
      console.log(`🎬 Starte Fall-Animation für ${tilesToFall.length} Tiles...`);
      
      // Sammle alle DOM-Elemente der fallenden Tiles (an ihren neuen Positionen)
      const tileElements = tilesToFall.map(fallData => {
        const element = document.querySelector(`[data-index="${fallData.toIndex}"]`);
        if (element) {
          // Berechne die Fall-Distanz
          const fallDistance = fallData.fallDistance || (fallData.toRow - fallData.fromRow);
          
          const tileHeight = 60; // Höhe eines Tiles in Pixeln
          const fallPixels = fallDistance * tileHeight;
          
          // Setze das Tile an seine ursprüngliche Position (oben) mit transform
          element.style.transform = `translateY(-${fallPixels}px)`;
          element.style.transition = 'transform 0.4s ease-out';
          
          // Füge CSS-Klasse für die Fall-Animation hinzu
          element.classList.add('falling');
          
          console.log(`🎬 Fall-Animation für Tile ${fallData.toIndex}: ${fallDistance} Zeile(n) (${fallPixels}px)`);
        }
        return element;
      }).filter(element => element !== null);
      
      if (tileElements.length === 0) {
        console.warn(`⚠️ Keine DOM-Elemente für Fall-Animation gefunden`);
        return;
      }
      
      console.log(`🎬 ${tileElements.length} DOM-Elemente für Fall-Animation vorbereitet`);
      
      // Warte kurz, damit die transform-Eigenschaft gesetzt wird
      await this.wait(50);
      
      // Bewege alle Tiles zu ihrer finalen Position (Fall-Animation)
      tileElements.forEach(element => {
        element.style.transform = 'translateY(0px)';
      });
      
      // Spiele Fall-Sound ab
      this.playSound('falling');
      
      // Warte auf die Fall-Animation (0,4 Sekunden)
      await this.wait(400);
      
      // Entferne die CSS-Klassen und transform-Eigenschaften
      tileElements.forEach(element => {
        element.classList.remove('falling');
        element.style.removeProperty('transform');
        element.style.removeProperty('transition');
      });
      
      console.log(`🎬 Fall-Animation abgeschlossen`);
    },
    
    // Animierte Erscheinung neuer Tiles
    async animateNewTilesAppearing(newTilePositions) {
      console.log(`🎬 Starte Erscheinungs-Animation für ${newTilePositions.length} neue Tiles...`);
      
      // Sammle alle DOM-Elemente der neuen Tiles
      const tileElements = newTilePositions.map(tileData => {
        const element = document.querySelector(`[data-index="${tileData.index}"]`);
        if (element) {
          // Füge CSS-Klasse für die Erscheinungs-Animation hinzu
          element.classList.add('new-tile');
          console.log(`🎬 CSS-Klasse 'new-tile' zu Tile ${tileData.index} hinzugefügt`);
        }
        return element;
      }).filter(element => element !== null);
      
      if (tileElements.length === 0) {
        console.warn(`⚠️ Keine DOM-Elemente für Erscheinungs-Animation gefunden`);
        return;
      }
      
      console.log(`🎬 ${tileElements.length} DOM-Elemente für Erscheinungs-Animation vorbereitet`);
      
      // Warte auf die Erscheinungs-Animation (0,5 Sekunden)
      await this.wait(500);
      
      // Entferne die CSS-Klassen
      tileElements.forEach(element => {
        element.classList.remove('new-tile');
      });
      
      console.log(`🎬 Erscheinungs-Animation abgeschlossen`);
    },
    
    // Erstelle ein zufälliges Tile
    createRandomTile() {
      // Verwende die verfügbaren Tile-Typen aus dem aktuellen Level
      if (this.currentLevelData && this.currentLevelData.tileTypes && this.currentLevelData.tileTypes.length > 0) {
        const randomType = this.currentLevelData.tileTypes[
          Math.floor(Math.random() * this.currentLevelData.tileTypes.length)
        ];
        return { type: randomType };
      } else {
        // Fallback: Verwende Standard-Tile-Typen
        const defaultTypes = ['red', 'blue', 'green', 'yellow', 'purple'];
        const randomType = defaultTypes[Math.floor(Math.random() * defaultTypes.length)];
        return { type: randomType };
      }
    },

    checkLevelObjectives() {
      // WICHTIG: Zusätzliche Sicherheit - prüfe ob das Level gerade initialisiert wird
      if (this.isInitializingLevel) {
        return;
      }
      
      if (!this.currentLevelData || !this.currentLevelData.objectives) {
        return;
      }
      
      // WICHTIG: Prüfe nur wenn der Spieler bereits gespielt hat
      if (this.moves === 0) {
        return;
      }
      
      // WICHTIG: Prüfe ob es überhaupt Level-Objekte gibt
      if (this.currentLevelData.objectives.length === 0) {
        return;
      }
      
      let allObjectivesCompleted = true;
      
      this.currentLevelData.objectives.forEach((objective, index) => {
        let isCompleted = false;
        
        switch (objective.type) {
          case 'score':
            isCompleted = this.checkObjectiveCompletion(this.levelScore, objective.target, objective.operator);
            break;
          case 'matches':
            isCompleted = this.checkObjectiveCompletion(this.matchesMade, objective.target, objective.operator);
            break;
          case 'moves':
            isCompleted = this.checkObjectiveCompletion(this.moves, objective.target, objective.operator);
            break;
          default:
            isCompleted = false;
        }
        
        // Setze completed-Status
        objective.completed = isCompleted;
        
        if (!isCompleted) {
          allObjectivesCompleted = false;
        }
      });
      
      // Prüfe ob alle Objekte erreicht wurden
      if (allObjectivesCompleted) {
        this.completeLevel();
      }
    },

    completeLevel() {
      // Level als abgeschlossen markieren
      this.gameActive = false;
      
      // Berechne Sterne basierend auf Performance
      this.calculateStars();
      
      // Speichere den Fortschritt
      this.saveProgressToBackend();
      
      // Zeige Level-Abschluss Dialog
      this.showLevelComplete = true;
    },

    // Hilfsmethode für Objective-Prüfung mit Operatoren
    checkObjectiveCompletion(currentValue, targetValue, operator) {
      switch (operator) {
        case '>=':
          return currentValue >= targetValue;
        case '<=':
          return currentValue <= targetValue;
        case '=':
          return currentValue === targetValue;
        case '>':
          return currentValue > targetValue;
        case '<':
          return currentValue < targetValue;
        default:
          return currentValue >= targetValue; // Fallback
      }
    },

    // Zentrale Fehlerbehandlung für Lade-Fehler
    handleLoadError(message, error) {
      // Setze Spiel-Status auf Fehler
      this.gameActive = false;
      this.isLoadingData = false;
      
      // Verwende den bestehenden ErrorDialog aus der App.vue
      if (this.$refs.errorDialog) {
        const fullMessage = `${message}\n\nFehler-Details: ${error.message || 'Unbekannter Fehler'}\n\nDas Spiel konnte nicht geladen werden. Überprüfe deine Internetverbindung und versuche es erneut.`;
        this.$refs.errorDialog.open(fullMessage);
      } else {
        // Fallback: Zeige einfache Alert-Meldung
        alert(`${message}\n\nFehler: ${error.message || 'Unbekannter Fehler'}`);
      }
    },



    calculateStars() {
      // Einfache Sterne-Berechnung basierend auf verbleibenden Zügen
      const movesUsed = this.currentLevelData.moveLimit - this.movesLeft;
      const maxMoves = this.currentLevelData.moveLimit;
      
      if (movesUsed <= maxMoves * 0.5) {
        this.levelStars = 3; // 3 Sterne
      } else if (movesUsed <= maxMoves * 0.8) {
        this.levelStars = 2; // 2 Sterne
      } else {
        this.levelStars = 1; // 1 Stern
      }
      
      this.stars += this.levelStars;
    },

    startFallAnimation(matchedIndices = []) {
      this.isFalling = true;
      
      // Sicherheitscheck: Stelle sicher, dass matchedIndices ein Array ist
      if (!Array.isArray(matchedIndices)) {
        matchedIndices = [];
      }
      
      // Animiere das Verschwinden der gematchten Tiles
      this.animateTileDisappearance(matchedIndices);
      
      // Nach der Verschwinden-Animation: Tiles entfernen und Fall-Animation starten
      setTimeout(() => {
        // Setze gematchte Tiles auf null (außer Regenbögen)
        matchedIndices.forEach(index => {
          if (this.board[index] && this.board[index].type !== 'rainbow') {
            this.safeRemoveTile(index);
          }
        });
        
        // Starte Fall-Animation
        this.processFalling();
      }, 300);
    },

    animateTileDisappearance(matchedIndices = []) {
      // Sicherheitscheck: Stelle sicher, dass matchedIndices ein Array ist
      if (!Array.isArray(matchedIndices)) {
        matchedIndices = [];
      }
      
      matchedIndices.forEach(index => {
        const tileElement = document.querySelector(`[data-index="${index}"]`);
        if (tileElement) {
          tileElement.classList.add('disappearing');
        }
      });
      
      // Entferne die disappearing-Klasse nach der Animation
      setTimeout(() => {
        matchedIndices.forEach(index => {
          const tileElement = document.querySelector(`[data-index="${index}"]`);
          if (tileElement) {
            tileElement.classList.remove('disappearing');
            tileElement.style.transform = '';
            tileElement.style.opacity = '';
            tileElement.style.zIndex = '';
          }
        });
      }, 300);
    },

    // Fall-Prozess: Tiles fallen lassen und neue hinzufügen
    async processFalling() {
      console.log('🔧 Starte Fall-Prozess...');
      
      // Führe Fall-Down-Logik aus
      await this.fallTilesDown();
      
      // Fülle leere gültige Felder mit neuen Tiles auf
      await this.checkAndFillEmptyValidFields();
      
      console.log('🔧 Fall-Prozess abgeschlossen');
    },

    // Prüfe auf Cascade-Matches nach dem Fallen
    async checkForCascadeMatches() {
      console.log('🔧 Prüfe auf Cascade-Matches...');
      
      // Warte kurz, damit alle Animationen abgeschlossen sind
      await this.wait(200);
      
      // Prüfe ob neue Matches entstanden sind
      const newMatches = this.findMatchesOnBoard(this.board, false);
      
      // Filtere Power-up-Matches heraus (diese sollen nicht als Cascade-Matches behandelt werden)
      const filteredMatches = newMatches.filter(match => {
        if (match.type === 'l-shape') {
          console.log('🔧 L-Form Match in Cascade gefunden - überspringe');
          return false;
        }
        if (Array.isArray(match) && match.length === 4) {
          console.log('🔧 4er-Match in Cascade gefunden - überspringe');
          return false;
        }
        return true;
      });
      
      if (filteredMatches.length > 0) {
        console.log(`🔧 ${filteredMatches.length} neue Cascade-Matches gefunden`);
        await this.handleMatches(filteredMatches, false);
      } else {
        console.log('🔧 Keine neuen Cascade-Matches gefunden');
      }
    },





    // Führe einen Move durch (Tausch zweier Tiles)
    async performMove(fromIndex, toIndex) {
      console.log(`🔧 Führe Move durch: ${fromIndex} ↔ ${toIndex}`);
      
      // Prüfe ob beide Positionen gültig sind
      if (!this.board[fromIndex] || !this.board[toIndex]) {
        console.log('⚠️ Ungültige Positionen für Move');
        return false;
      }
      
      // Prüfe ob die Tiles benachbart sind
      if (!this.areTilesAdjacent(fromIndex, toIndex)) {
        console.log('⚠️ Tiles sind nicht benachbart');
        return false;
      }
      
      // Prüfe ob ein Tile eine Rakete ist
      if (this.isRocketTile(this.board[fromIndex].type) || this.isRocketTile(this.board[toIndex].type)) {
        console.log('🚀 Rakete wird aktiviert!');
        return await this.activateRocket(fromIndex, toIndex);
      }
      
      // Prüfe ob ein Tile eine Bombe ist
      if (this.board[fromIndex].type === 'bomb' || this.board[toIndex].type === 'bomb') {
        console.log('💣 Bombe wird aktiviert!');
        return await this.activateBomb(fromIndex, toIndex);
      }
      
      // Prüfe ob ein Tile ein Regenbogen-Tile ist
      if (this.board[fromIndex].type === 'rainbow' || this.board[toIndex].type === 'rainbow') {
        console.log('🌈 Regenbogen-Tile wird aktiviert!');
        return await this.activateRainbow(fromIndex, toIndex);
      }
      
      // Prüfe ob das Ziel ein leeres Feld ist
      if (!this.board[toIndex]) {
        console.log('⚠️ Verschieben auf leeres Feld nicht erlaubt');
        return false;
      }
      
      // Führe den Tausch durch
      const tempTile = { ...this.board[fromIndex] };
      this.board[fromIndex] = { ...this.board[toIndex] };
      this.board[toIndex] = tempTile;
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
      
      // Warte auf Animation (0,75 Sekunden)
      await this.wait(750);
      
                  // Prüfe ob der Move einen gültigen Match erzeugt hat
        const matches = this.findMatchesOnBoard(this.board, false);
        const hasValidMatch = matches.some(match => 
          (Array.isArray(match) && match.length >= 3) || 
          match.type === 'l-shape'
        );
    
    if (hasValidMatch) {
      console.log(`✅ Move erfolgreich - ${matches.length} Match(es) gefunden!`);
      
      // WICHTIG: Zähle den erfolgreichen Zug
      this.moves++;
      this.movesLeft--;
      console.log(`🎯 Zug gezählt: ${this.moves} Züge gemacht, ${this.movesLeft} Züge übrig`);
      
      await this.handleMatches(matches, true);
      return true;
    } else {
      console.log('❌ Move nicht erfolgreich - Kein 3er-Match');
      // Tausche die Tiles zurück
      this.board[fromIndex] = { ...this.board[toIndex] };
      this.board[toIndex] = tempTile;
      this.$forceUpdate();
      return false;
    }
    },
    
    // Aktiviere eine Rakete (durch Verschieben oder Doppelklick)
    async activateRocket(rocketIndex, targetIndex) {
      console.log(`🚀 Aktiviere Rakete an Position ${rocketIndex}`);
      
      // Bestimme das Zentrum der Raketen-Explosion
      let explosionCenter;
      let tilesToRemove = new Set();
      
      if (this.isRocketTile(this.board[rocketIndex].type)) {
        // Rakete wird auf ein Nachbarfeld verschoben
        explosionCenter = targetIndex;
        tilesToRemove = this.getRocketExplosionTiles(targetIndex);
      } else {
        // Ein Tile wird auf die Rakete verschoben
        explosionCenter = rocketIndex;
        tilesToRemove = this.getRocketExplosionTiles(rocketIndex);
      }
      
      // Entferne die Tiles um das Explosionszentrum
      if (tilesToRemove.size > 0) {
        console.log(`🚀 Entferne ${tilesToRemove.size} Tiles um Position ${explosionCenter}`);
        
        // Starte Schrumpf-Animation für alle zu entfernenden Tiles
        await this.animateTileRemoval(Array.from(tilesToRemove));
        
        // Entferne alle Tiles nach der Animation
        tilesToRemove.forEach(index => {
          if (this.board[index]) {
            console.log(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
            this.board[index] = null;
          }
        });
        
        // Entferne auch die Rakete selbst
        if (this.isRocketTile(this.board[rocketIndex].type)) {
          console.log(`🚀 Entferne Rakete an Position ${rocketIndex}`);
          this.board[rocketIndex] = null;
        }
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
        
        // Zeige Raketen-Explosions-Animation
        await this.showRocketExplosionAnimation(explosionCenter);
        
        // Führe Fall-Down-Logik aus
        await this.fallTilesDown();
        
        // Fülle leere gültige Felder mit neuen Tiles auf
        await this.checkAndFillEmptyValidFields();
        
        // Erhöhe den Zug-Zähler
        this.countPowerUpMove();
        
        return true;
      }
      
      return false;
    },
    
    // Aktiviere eine Bombe (durch Verschieben oder Doppelklick)
    async activateBomb(bombIndex, targetIndex) {
      console.log(`💣 Aktiviere Bombe an Position ${bombIndex}`);
      
      // Bestimme das Zentrum der Bomben-Explosion
      let explosionCenter;
      
      if (this.board[bombIndex].type === 'bomb') {
        // Bombe wird auf ein Nachbarfeld verschoben
        explosionCenter = targetIndex;
      } else {
        // Ein Tile wird auf die Bombe verschoben
        explosionCenter = bombIndex;
      }
      
      // Zeige Bomben-Effekt-Animation
      await this.showBombEffectAnimation(explosionCenter);
      
              // Explodiere die Bombe mit 1 Ring (3x3 Bereich) - manuelle Aktivierung
        this.explodeBomb(explosionCenter, 1, true);
      
      // Entferne die Bombe nach der Explosion
      if (this.board[bombIndex].type === 'bomb') {
        console.log(`💣 Entferne Bombe an Position ${bombIndex}`);
        this.board[bombIndex] = null;
      }
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
      
      // Führe Fall-Down-Logik aus
      await this.fallTilesDown();
      
      // Fülle leere gültige Felder mit neuen Tiles auf
      await this.checkAndFillEmptyValidFields();
      
      // Erhöhe den Zug-Zähler
      this.countPowerUpMove();
      
      return true;
    },
    
    // Aktiviere ein Regenbogen-Tile (durch Verschieben)
    async activateRainbow(rainbowIndex, targetIndex) {
      console.log(`🌈 Aktiviere Regenbogen-Tile an Position ${rainbowIndex}`);
      
      // Bestimme das Zentrum der Regenbogen-Aktivität
      let activationCenter;
      
      if (this.board[rainbowIndex].type === 'rainbow') {
        // Regenbogen-Tile wird auf ein Nachbarfeld verschoben
        activationCenter = targetIndex;
      } else {
        // Ein Tile wird auf das Regenbogen-Tile verschoben
        activationCenter = rainbowIndex;
      }
      
      // Zeige Regenbogen-Effekt-Animation
      await this.showRainbowEffectAnimation(activationCenter);
      
      // Sammle alle Tiles des gleichen Typs wie das Ziel-Tile
      const targetTile = this.board[activationCenter];
      if (targetTile && !this.isPowerUpTile(targetTile.type)) {
        const tilesToRemove = new Set();
        
        // Gehe durch alle Tiles im Board
        for (let i = 0; i < this.board.length; i++) {
          if (this.board[i] && this.board[i].type === targetTile.type) {
            tilesToRemove.add(i);
          }
        }
        
        if (tilesToRemove.size > 0) {
          console.log(`🌈 Entferne ${tilesToRemove.size} Tiles vom Typ ${targetTile.type}`);
          
          // Starte Schrumpf-Animation für alle zu entfernenden Tiles
          await this.animateTileRemoval(Array.from(tilesToRemove));
          
          // Entferne alle Tiles nach der Animation
          tilesToRemove.forEach(index => {
            if (this.board[index]) {
              console.log(`🌈 Entferne Tile ${this.board[index].type} an Position ${index}`);
              this.board[index] = null;
            }
          });
          
          // Entferne auch das Regenbogen-Tile selbst
          if (this.board[rainbowIndex].type === 'rainbow') {
            console.log(`🌈 Entferne Regenbogen-Tile an Position ${rainbowIndex}`);
            this.board[rainbowIndex] = null;
          }
          
          // Aktualisiere die Anzeige
          this.$forceUpdate();
          
          // Führe Fall-Down-Logik aus
          await this.fallTilesDown();
          
          // Fülle leere gültige Felder mit neuen Tiles auf
          await this.checkAndFillEmptyValidFields();
          
          // Erhöhe den Zug-Zähler
          this.countPowerUpMove();
          
          return true;
        }
      }
      
      return false;
    },
    
    // Aktiviere eine Rakete automatisch (für sofortige Aktivierung nach der Erstellung)
    async activateRocketAutomatically(rocketIndex) {
      console.log(`🚀 Aktiviere Rakete automatisch an Position ${rocketIndex}`);
      
      // Wähle ein zufälliges Ziel für die Rakete
      const availableTargets = [];
      for (let i = 0; i < this.board.length; i++) {
        if (i !== rocketIndex && this.board[i] && !this.isRocketTile(this.board[i].type)) {
          availableTargets.push(i);
        }
      }
      
      if (availableTargets.length === 0) {
        console.warn('⚠️ Keine Ziele für Rakete verfügbar');
        return false;
      }
      
      // Wähle ein zufälliges Ziel
      const randomTarget = availableTargets[Math.floor(Math.random() * availableTargets.length)];
      console.log(`🚀 Rakete startet auf zufälliges Ziel an Position ${randomTarget}`);
      
      // Zeige Raketen-Explosions-Animation (einfache Version ohne Flug)
      await this.showRocketExplosionAnimationSimple(randomTarget);
      
      // Entferne die Tiles um das Explosionszentrum
      const tilesToRemove = this.getRocketExplosionTiles(randomTarget);
      
      if (tilesToRemove.size > 0) {
        console.log(`🚀 Entferne ${tilesToRemove.size} Tiles um Position ${randomTarget}`);
        
        // Starte Schrumpf-Animation für alle zu entfernenden Tiles
        await this.animateTileRemoval(Array.from(tilesToRemove));
        
        // Entferne alle Tiles nach der Animation
        tilesToRemove.forEach(index => {
          if (this.board[index]) {
            console.log(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
            this.board[index] = null;
          }
        });
        
        // Entferne auch die Rakete selbst
        console.log(`🚀 Entferne Rakete an Position ${rocketIndex}`);
        this.board[rocketIndex] = null;
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
        
        // Führe Fall-Down-Logik aus
        await this.fallTilesDown();
        
        // Fülle leere gültige Felder mit neuen Tiles auf
        await this.checkAndFillEmptyValidFields();
        
        // Erhöhe den Zug-Zähler
        this.countPowerUpMove();
        
        return true;
      }
      
      return false;
    },
    
    // Hole alle Tiles, die von der Raketen-Explosion betroffen sind
    getRocketExplosionTiles(centerIndex) {
      const tilesToRemove = new Set();
      const centerPos = this.indexToCoords(centerIndex);
      
      // Prüfe alle 4 Richtungen: oben, unten, links, rechts
      const directions = [
        { row: -1, col: 0 },  // oben
        { row: 1, col: 0 },   // unten
        { row: 0, col: -1 },  // links
        { row: 0, col: 1 }    // rechts
      ];
      
      directions.forEach(dir => {
        const newRow = centerPos.row + dir.row;
        const newCol = centerPos.col + dir.col;
        
        if (this.isValidPosition(newRow, newCol)) {
          const newIndex = this.coordsToIndex(newRow, newCol);
          if (newIndex !== null && this.board[newIndex] && !this.isRocketTile(this.board[newIndex].type)) {
            tilesToRemove.add(newIndex);
          }
        }
      });
      
      return tilesToRemove;
    },
    
    // Zeige Raketen-Explosions-Animation
    async showRocketExplosionAnimation(centerIndex) {
      const centerPos = this.indexToCoords(centerIndex);
      const tileElement = document.querySelector(`[data-index="${centerIndex}"]`);
      
      if (tileElement) {
        const rect = tileElement.getBoundingClientRect();
        this.rocketCenter = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
      }
      
      // Zeige Explosions-Animation
      this.showRocketEffect = true;
      this.playSound('rocket');
      
      // Warte auf Animation
      await this.wait(1000);
      
      // Verstecke Animation
      this.showRocketEffect = false;
    },
    
    // Zeige Raketen-Explosions-Animation für automatische Aktivierung (ohne Flug)
    async showRocketExplosionAnimationSimple(centerIndex) {
      const centerPos = this.indexToCoords(centerIndex);
      const tileElement = document.querySelector(`[data-index="${centerIndex}"]`);
      
      if (tileElement) {
        const rect = tileElement.getBoundingClientRect();
        this.rocketCenter = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
      }
      
      // Zeige Explosions-Animation
      this.showRocketEffect = true;
      this.playSound('rocket');
      
      // Warte auf Animation
      await this.wait(1000);
      
      // Verstecke Animation
      this.showRocketEffect = false;
    },
    
    // Rakete fliegt zu einem zufälligen belegten Feld
    async rocketFlightToRandomTile() {
      // Finde alle belegten Felder
      const occupiedTiles = [];
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && !this.isRocketTile(this.board[i].type)) {
          occupiedTiles.push(i);
        }
      }
      
      if (occupiedTiles.length > 0) {
        // Wähle ein zufälliges belegtes Feld
        const randomTargetIndex = occupiedTiles[Math.floor(Math.random() * occupiedTiles.length)];
        const targetPos = this.indexToCoords(randomTargetIndex);
        
        console.log(`🚀 Rakete fliegt zu Position [${targetPos.row}, ${targetPos.col}]`);
        
        // Zeige Flug-Animation
        await this.showRocketFlightAnimation(randomTargetIndex);
        
        // Entferne das Ziel-Tile nach der Animation
        this.board[randomTargetIndex] = null;
        console.log(`🚀 Ziel-Tile an Position ${randomTargetIndex} entfernt`);
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
      }
    },
    
    // Zeige Raketen-Flug-Animation
    async showRocketFlightAnimation(targetIndex) {
      const targetPos = this.indexToCoords(targetIndex);
      const targetElement = document.querySelector(`[data-index="${targetIndex}"]`);
      
      if (targetElement) {
        const rect = targetElement.getBoundingClientRect();
        this.rocketTarget = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
      }
      
      // Zeige Flug-Animation
      console.log(`🚀 Rakete fliegt zu Ziel...`);
      
      // Zeige die fliegende Rakete
      this.showFlyingRocket = true;
      
      // Berechne die Flug-Distanz
      const flyX = this.rocketTarget.x - this.rocketCenter.x;
      const flyY = this.rocketTarget.y - this.rocketCenter.y;
      
      // Setze CSS-Variablen für die Flug-Animation
      const flyingRocketElement = document.querySelector('.flying-rocket');
      if (flyingRocketElement) {
        flyingRocketElement.style.setProperty('--fly-x', `${flyX}px`);
        flyingRocketElement.style.setProperty('--fly-y', `${flyY}px`);
      }
      
      // Warte auf Flug-Animation (1 Sekunde)
      await this.wait(1000);
      
      // Verstecke die fliegende Rakete
      this.showFlyingRocket = false;
      
      console.log(`🚀 Rakete erreicht Ziel und zerstört es`);
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
    },
    
    // Hilfsmethode: Warte für eine bestimmte Zeit
    wait(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    
    // Hilfsmethode: Prüfe ob zwei Tiles benachbart sind
    areTilesAdjacent(index1, index2) {
      const pos1 = this.indexToCoords(index1);
      const pos2 = this.indexToCoords(index2);
      
      // Prüfe horizontale Nachbarschaft
      if (pos1.row === pos2.row && Math.abs(pos1.col - pos2.col) === 1) {
        return true;
      }
      
      // Prüfe vertikale Nachbarschaft
      if (pos1.col === pos2.col && Math.abs(pos1.row - pos2.row) === 1) {
        return true;
      }
      
      return false;
    },
    
    // Markiere alle benachbarten Tiles als verfügbar für den Move
    highlightAdjacentTiles(tileIndex) {
      // Entferne zuerst alle bestehenden Hervorhebungen
      this.clearAllHighlights();
      
      // Finde alle benachbarten Tiles
      const adjacentTiles = [];
      const currentPos = this.indexToCoords(tileIndex);
      
      console.log(`🔧 Position: [${currentPos.row}, ${currentPos.col}]`);
      
      // Prüfe alle 4 Richtungen: oben, unten, links, rechts
      const directions = [
        { row: -1, col: 0 },  // oben
        { row: 1, col: 0 },   // unten
        { row: 0, col: -1 },  // links
        { row: 0, col: 1 }    // rechts
      ];
      
      directions.forEach(dir => {
        const newRow = currentPos.row + dir.row;
        const newCol = currentPos.col + dir.col;
        
        if (this.isValidPosition(newRow, newCol)) {
          const newIndex = this.coordsToIndex(newRow, newCol);
          if (newIndex !== null && this.board[newIndex]) {
            adjacentTiles.push(newIndex);
            console.log(`🔧 Benachbart: [${newRow}, ${newCol}] -> Index ${newIndex}`);
          }
        }
      });
      
      console.log(`🔧 ${adjacentTiles.length} benachbarte Tiles gefunden`);
      
      // Markiere alle benachbarten Tiles
      adjacentTiles.forEach(index => {
        const tileElement = document.querySelector(`[data-index="${index}"]`);
        if (tileElement) {
          tileElement.classList.add('adjacent-available');
          console.log(`🔧 CSS-Klasse zu Tile ${index} hinzugefügt`);
          
          // Test: Überprüfe ob die Klasse tatsächlich angewendet wurde
          setTimeout(() => {
            if (tileElement.classList.contains('adjacent-available')) {
              console.log(`✅ CSS-Klasse 'adjacent-available' ist auf Tile ${index} aktiv`);
            } else {
              console.warn(`❌ CSS-Klasse 'adjacent-available' ist NICHT auf Tile ${index} aktiv`);
            }
          }, 100);
        } else {
          console.warn(`⚠️ DOM-Element für Tile ${index} nicht gefunden`);
        }
      });
      
      // Speichere die benachbarten Tiles für Hover-Events
      this.adjacentTilesForHover = adjacentTiles;
    },
    
    // Entferne alle Hervorhebungen und CSS-Klassen
    clearAllHighlights() {
      // Entferne dragging-Klasse vom gedraggten Tile
      if (this.draggedTileIndex !== null) {
        const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
        if (draggedElement) {
          draggedElement.classList.remove('dragging');
        }
      }
      
      // Entferne alle adjacent-available Klassen
      const adjacentElements = document.querySelectorAll('.adjacent-available');
      adjacentElements.forEach(element => {
        element.classList.remove('adjacent-available');
      });
      
      // Entferne alle drag-hover Klassen
      const hoverElements = document.querySelectorAll('.drag-hover');
      hoverElements.forEach(element => {
        element.classList.remove('drag-hover');
      });
      
      // Leere die Liste der benachbarten Tiles
      this.adjacentTilesForHover = [];
    },

    // Drag & Drop Event-Handler
    onTileMouseDown(event, tileIndex) {
      console.log(`🔧 onTileMouseDown aufgerufen für Tile ${tileIndex}`);
      
      // Verhindere Standard-Verhalten
      event.preventDefault();
      event.stopPropagation();
      
      // Prüfe ob das Tile existiert
      if (!this.board[tileIndex]) {
        console.warn(`⚠️ Tile ${tileIndex} existiert nicht im Board`);
        return;
      }
      
      // Prüfe ob bereits ein Drag läuft
      if (this.isDragging) {
        console.log(`🔧 Drag läuft bereits, ignoriere neuen Start`);
        return;
      }
      
      console.log(`🔧 Starte Drag für Tile ${tileIndex}`);
      
      // Setze Drag-Status
      this.draggedTileIndex = tileIndex;
      this.isDragging = true;
      
      // Speichere Start-Position für Drag-Offset
      this.dragStartX = event.clientX;
      this.dragStartY = event.clientY;
      
      // WICHTIG: Speichere die ursprüngliche Position des gedraggten Tiles
      const tileElement = event.target.closest('.game-tile');
      if (tileElement) {
        const rect = tileElement.getBoundingClientRect();
        this.originalTilePosition = {
          left: rect.left,
          top: rect.top,
          width: rect.width,
          height: rect.height
        };
        console.log(`🔧 Ursprüngliche Tile-Position gespeichert: [${rect.left}, ${rect.top}] mit Größe [${rect.width}x${rect.height}]`);
        
        // Füge CSS-Klassen für visuelles Feedback hinzu
        tileElement.classList.add('dragging');
        console.log(`🔧 'dragging' Klasse zu Tile ${tileIndex} hinzugefügt`);
      } else {
        console.warn(`⚠️ Konnte .game-tile Element für Tile ${tileIndex} nicht finden`);
      }
      
      console.log(`🔧 Drag-Start-Position: dragStartX=${this.dragStartX}, dragStartY=${this.dragStartY}`);
      
      // Markiere alle benachbarten Tiles als verfügbar für den Move
      this.highlightAdjacentTiles(tileIndex);
      
      // WICHTIG: Entferne alle falschen drag-hover Klassen von anderen Tiles
      this.removeFalseDragHoverClasses();
      
      console.log(`🔧 Drag-Status: isDragging=${this.isDragging}, draggedTileIndex=${this.draggedTileIndex}`);
      
      // DEBUG: Zeige alle Tiles mit CSS-Klassen nach dem Drag-Start
      this.debugAllTileClasses();
    },
    
    // Entferne alle falschen drag-hover Klassen von nicht-benachbarten Tiles
    removeFalseDragHoverClasses() {
      if (!this.adjacentTilesForHover || this.adjacentTilesForHover.length === 0) {
        return;
      }
      
      console.log(`🔧 Entferne falsche drag-hover Klassen...`);
      
      // Finde alle Tiles mit drag-hover Klasse
      const allHoverElements = document.querySelectorAll('.drag-hover');
      
      allHoverElements.forEach(element => {
        const dataIndex = element.getAttribute('data-index');
        if (dataIndex !== null) {
          const tileIndex = parseInt(dataIndex);
          
          // Prüfe ob das Tile benachbart ist
          if (!this.adjacentTilesForHover.includes(tileIndex)) {
            element.classList.remove('drag-hover');
            console.log(`🔧 Entferne falsche drag-hover Klasse von Tile ${tileIndex}`);
          }
        }
      });
    },
    
    // Neue Methode: Tile-Moving mit Animation
    onTileMouseMove(event) {
      if (!this.isDragging || this.draggedTileIndex === null) {
        return;
      }
      
      console.log(`🔧 onTileMouseMove: clientX=${event.clientX}, clientY=${event.clientY}`);
      
      // Berechne Drag-Offset
      const deltaX = event.clientX - this.dragStartX;
      const deltaY = event.clientY - this.dragStartY;
      
      console.log(`🔧 Drag-Offset: deltaX=${deltaX}px, deltaY=${deltaY}px`);
      
      // Bewege das gedraggte Tile
      const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
      if (draggedElement) {
        console.log(`🔧 Bewege Tile ${this.draggedTileIndex} um ${deltaX}px, ${deltaY}px`);
        
        // Setze alle Styles direkt
        draggedElement.style.position = 'relative';
        draggedElement.style.left = `${deltaX}px`;
        draggedElement.style.top = `${deltaY}px`;
        draggedElement.style.zIndex = '1000';
        draggedElement.style.pointerEvents = 'none';
        
        console.log(`🔧 Styles gesetzt: position=${draggedElement.style.position}, left=${draggedElement.style.left}, top=${draggedElement.style.top}`);
      } else {
        console.warn(`⚠️ Konnte gedraggtes Tile ${this.draggedTileIndex} nicht finden`);
      }
      
      // Prüfe Überlappung mit benachbarten Tiles
      this.checkTileOverlap(deltaX, deltaY);
    },
    
    // Prüfe Überlappung und starte Animation
    checkTileOverlap(deltaX, deltaY) {
      const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
      if (!draggedElement) return;
      
      const draggedRect = draggedElement.getBoundingClientRect();
      
      // WICHTIG: Prüfe zuerst die Überlappung mit der ursprünglichen Position des gedraggten Tiles
      if (this.originalTilePosition) {
        // Berechne die ursprüngliche Position des gedraggten Tiles
        const originalRect = {
          left: this.originalTilePosition.left,
          top: this.originalTilePosition.top,
          right: this.originalTilePosition.left + draggedRect.width,
          bottom: this.originalTilePosition.top + draggedRect.height
        };
        
        // Berechne Überlappung mit der ursprünglichen Position
        const overlapX = Math.min(draggedRect.right, originalRect.right) - Math.max(draggedRect.left, originalRect.left);
        const overlapY = Math.min(draggedRect.bottom, originalRect.bottom) - Math.max(draggedRect.top, originalRect.top);
        
        if (overlapX > 0 && overlapY > 0) {
          const overlapArea = overlapX * overlapY;
          const draggedArea = draggedRect.width * draggedRect.height;
          const overlapWithOriginal = (overlapArea / draggedArea) * 100;
          
          console.log(`🔧 Überlappung mit ursprünglicher Position: ${overlapWithOriginal.toFixed(1)}%`);
          
          // Animation stoppen nur wenn das gedraggte Tile fast komplett zurück zu seiner ursprünglichen Position ist
          // UND eine Animation läuft
          if (overlapWithOriginal > 98 && this.currentlyAnimatingTile !== null) {
            console.log(`🔧 Gedraggtes Tile ist fast zurück zu seiner ursprünglichen Position (${overlapWithOriginal.toFixed(1)}%), stoppe Animation für Tile ${this.currentlyAnimatingTile}`);
            this.stopMovePreviewAnimation(this.currentlyAnimatingTile);
            this.currentlyAnimatingTile = null;
            return; // Keine weiteren Animationen starten
          }
        }
      }
      
      // Sammle alle Überlappungen mit benachbarten Tiles über 10%
      const overlappingTiles = [];
      
      this.adjacentTilesForHover.forEach(adjacentIndex => {
        const adjacentElement = document.querySelector(`[data-index="${adjacentIndex}"]`);
        if (!adjacentElement) return;
        
        const adjacentRect = adjacentElement.getBoundingClientRect();
        
        // Berechne Überlappung
        const overlapX = Math.min(draggedRect.right, adjacentRect.right) - Math.max(draggedRect.left, adjacentRect.left);
        const overlapY = Math.min(draggedRect.bottom, adjacentRect.bottom) - Math.max(draggedRect.top, adjacentRect.top);
        
        if (overlapX > 0 && overlapY > 0) {
          const overlapArea = overlapX * overlapY;
          const draggedArea = draggedRect.width * draggedRect.height;
          const overlapPercentage = (overlapArea / draggedArea) * 100;
          
          console.log(`🔧 Überlappung mit Tile ${adjacentIndex}: ${overlapPercentage.toFixed(1)}%`);
          
          if (overlapPercentage > 10) {
            overlappingTiles.push({
              index: adjacentIndex,
              percentage: overlapPercentage
            });
          }
        }
      });
      
      // Sortiere nach Überlappungs-Prozentsatz (höchste zuerst)
      overlappingTiles.sort((a, b) => b.percentage - a.percentage);
      
      if (overlappingTiles.length > 0) {
        const bestTile = overlappingTiles[0];
        console.log(`🔧 Beste Überlappung: Tile ${bestTile.index} mit ${bestTile.percentage.toFixed(1)}%`);
        
        // Wenn ein anderes Tile animiert ist, stoppe es
        if (this.currentlyAnimatingTile !== null && this.currentlyAnimatingTile !== bestTile.index) {
          console.log(`🔧 Stoppe vorheriges animiertes Tile ${this.currentlyAnimatingTile} für bessere Überlappung`);
          this.stopMovePreviewAnimation(this.currentlyAnimatingTile);
        }
        
        // Starte Animation für das beste Tile
        if (this.currentlyAnimatingTile === null) {
          this.currentlyAnimatingTile = bestTile.index;
          this.startMovePreviewAnimation(bestTile.index);
        }
      } else {
        // Keine Überlappung über 10% - stoppe alle Animationen
        if (this.currentlyAnimatingTile !== null) {
          console.log(`🔧 Keine Überlappung über 10%, stoppe Animation für Tile ${this.currentlyAnimatingTile}`);
          this.stopMovePreviewAnimation(this.currentlyAnimatingTile);
          this.currentlyAnimatingTile = null;
        }
      }
    },
    
    // Starte Move-Preview Animation
    startMovePreviewAnimation(adjacentIndex) {
      const adjacentElement = document.querySelector(`[data-index="${adjacentIndex}"]`);
      if (!adjacentElement) return;
      
      // WICHTIG: Verwende die gespeicherte ursprüngliche Position des gedraggten Tiles
      if (!this.originalTilePosition) {
        console.warn(`⚠️ Keine ursprüngliche Tile-Position gespeichert`);
        return;
      }
      
      const adjacentRect = adjacentElement.getBoundingClientRect();
      
      // Berechne den Offset zur ursprünglichen Position des gedraggten Tiles
      const deltaX = this.originalTilePosition.left - adjacentRect.left;
      const deltaY = this.originalTilePosition.top - adjacentRect.top;
      
      console.log(`🎬 Starte Animation für Tile ${adjacentIndex}:`);
      console.log(`  - Ursprüngliche Position gedraggtes Tile: [${this.originalTilePosition.left}, ${this.originalTilePosition.top}]`);
      console.log(`  - Aktuelle Position benachbartes Tile: [${adjacentRect.left}, ${adjacentRect.top}]`);
      console.log(`  - Delta zur ursprünglichen Position: [${deltaX}px, ${deltaY}px]`);
      
      // Verwende transform direkt mit !important über setProperty
      adjacentElement.style.setProperty('transform', `translate(${deltaX}px, ${deltaY}px)`, 'important');
      adjacentElement.style.zIndex = '999';
      adjacentElement.style.transition = 'all 0.3s ease-out';
      
      // Füge eine CSS-Klasse hinzu um den transform zu priorisieren
      adjacentElement.classList.add('preview-animating');
      
      console.log(`🎬 Styles gesetzt für Tile ${adjacentIndex}: transform=${adjacentElement.style.transform}`);
    },
    
    // Stoppe Move-Preview Animation
    stopMovePreviewAnimation(adjacentIndex) {
      const adjacentElement = document.querySelector(`[data-index="${adjacentIndex}"]`);
      if (!adjacentElement) return;
      
      console.log(`⏹️ Stoppe Animation für Tile ${adjacentIndex}`);
      
      // Bewege das Tile zurück zur ursprünglichen Position
      adjacentElement.style.transition = 'all 0.3s ease-out';
      adjacentElement.style.setProperty('transform', 'translate(0px, 0px)', 'important');
      adjacentElement.style.zIndex = 'auto';
      
      // Warte kurz und setze dann alle Styles komplett zurück
      setTimeout(() => {
        adjacentElement.style.removeProperty('transform');
        adjacentElement.style.transition = '';
        adjacentElement.classList.remove('preview-animating');
      }, 300);
      
      console.log(`⏹️ Animation gestoppt für Tile ${adjacentIndex}`);
    },
    
    // Hilfsmethode: Prüfe ob ein Tile gerade animiert wird
    isTileAnimating(tileIndex) {
      // Verwende den gespeicherten Index statt der DOM-Styles
      return this.currentlyAnimatingTile === tileIndex;
    },
    
    // Setze alle Tile-Animationen zurück
    resetAllTileAnimations() {
      // Setze das gedraggte Tile zurück
      const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
      if (draggedElement) {
        console.log(`🔄 Setze gedraggtes Tile ${this.draggedTileIndex} zurück`);
        
        // Setze alle Styles zurück
        draggedElement.style.position = '';
        draggedElement.style.left = '';
        draggedElement.style.top = '';
        draggedElement.style.zIndex = '';
        draggedElement.style.pointerEvents = '';
        draggedElement.style.transition = 'all 0.3s ease-out';
        
        // Warte kurz und setze dann alle Styles komplett zurück
          setTimeout(() => {
          draggedElement.style.transition = '';
        }, 300);
      }
      
      // Setze alle benachbarten Tiles zurück
      this.adjacentTilesForHover.forEach(adjacentIndex => {
        this.stopMovePreviewAnimation(adjacentIndex);
      });
      
      // Zusätzlich: Setze alle Tiles zurück, die möglicherweise noch transform haben
      document.querySelectorAll('.game-tile').forEach(tileElement => {
        if (tileElement.style.transform && tileElement.style.transform !== '') {
          console.log(`🔄 Setze transform für Tile zurück: ${tileElement.dataset.index}`);
          tileElement.style.removeProperty('transform');
          tileElement.style.transition = '';
          tileElement.style.zIndex = '';
          tileElement.classList.remove('preview-animating');
        }
      });
      
      // Setze den aktuell animierten Tile zurück
      this.currentlyAnimatingTile = null;
      
      console.log(`🔄 Alle Tile-Animationen zurückgesetzt`);
    },
    
    // Globaler Mouse-Move Handler für kontinuierliches Dragging
    onGlobalMouseMove(event) {
      if (this.isDragging) {
        this.onTileMouseMove(event);
      }
    },
    
    // Globaler Mouse-Up Handler für Drag & Drop
    onGlobalMouseUp(event) {
      if (this.isDragging) {
        console.log(`🔧 Globaler MouseUp während Drag - beende Drag`);
        this.endDrag();
      }
    },
    
    onTileMouseUp(event, tileIndex) {
      console.log(`🔧 onTileMouseUp aufgerufen für Tile ${tileIndex}`);
      
      // Verhindere Standard-Verhalten
      event.preventDefault();
      event.stopPropagation();
      
      // Prüfe ob ein Drag läuft
      if (!this.isDragging || this.draggedTileIndex === null) {
        console.log(`🔧 Kein aktiver Drag, ignoriere MouseUp`);
        return;
      }
      
      console.log(`🔧 Beende Drag: draggedTileIndex=${this.draggedTileIndex}, targetTile=${tileIndex}`);
      
      // WICHTIG: Prüfe ob ein Tile tatsächlich animiert wurde
      let shouldPerformMove = false;
      let targetTileIndex = null;
      
      if (this.draggedTileIndex !== tileIndex) {
        // Verschiedene Tiles - prüfe ob das Ziel-Tile animiert wurde
        if (this.currentlyAnimatingTile === tileIndex) {
          // Das Ziel-Tile ist animiert - führe Move durch
          shouldPerformMove = true;
          targetTileIndex = tileIndex;
          console.log(`🔧 Ziel-Tile ${tileIndex} ist animiert - führe Move durch`);
        } else {
          // Das Ziel-Tile ist nicht animiert - kein Move
          console.log(`🔧 Ziel-Tile ${tileIndex} ist nicht animiert - kein Move`);
        }
      } else {
        console.log(`🔧 Gleiches Tile, kein Move erforderlich`);
      }
      
      // Setze alle Animationen zurück
      this.resetAllTileAnimations();
      
      // Führe den Move durch, wenn erlaubt
      if (shouldPerformMove && targetTileIndex !== null) {
        console.log(`🔧 Führe Move durch: ${this.draggedTileIndex} → ${targetTileIndex}`);
        this.performMove(this.draggedTileIndex, targetTileIndex);
      }
      
      // Cleanup
      this.isDragging = false;
      this.draggedTileIndex = null;
      this.dragStartX = null;
      this.dragStartY = null;
      this.originalTilePosition = null;
      this.currentlyAnimatingTile = null;
      
      // Entferne alle CSS-Klassen und Hervorhebungen
      this.clearAllHighlights();
      
      console.log(`🔧 Drag beendet, Status zurückgesetzt`);
    },
    
    // Beende den Drag korrekt
    endDrag() {
      console.log(`🔧 endDrag aufgerufen`);
      
      if (!this.isDragging) {
        console.log(`🔧 Kein aktiver Drag, ignoriere endDrag`);
        return;
      }
      
      // Prüfe ob ein Tile tatsächlich animiert wurde UND ob es sich um ein anderes Tile handelt
      let shouldPerformMove = false;
      let targetTileIndex = null;
      
      if (this.currentlyAnimatingTile !== null && this.currentlyAnimatingTile !== this.draggedTileIndex) {
        // Ein anderes Tile ist animiert - führe Move durch
        shouldPerformMove = true;
        targetTileIndex = this.currentlyAnimatingTile;
        console.log(`🔧 Anderes Tile ${targetTileIndex} ist animiert - führe Move durch`);
      } else if (this.currentlyAnimatingTile === this.draggedTileIndex) {
        // Das gedraggte Tile ist auf sich selbst animiert - kein Move
        console.log(`🔧 Gedraggtes Tile ist auf sich selbst animiert - kein Move`);
      } else {
        console.log(`🔧 Kein Tile animiert - kein Move`);
      }
      
      // Zusätzliche Prüfung: Wenn das gedraggte Tile fast an seiner ursprünglichen Position ist, kein Move
      if (shouldPerformMove && this.originalTilePosition) {
        const draggedElement = document.querySelector(`[data-index="${this.draggedTileIndex}"]`);
        if (draggedElement) {
          const currentRect = draggedElement.getBoundingClientRect();
          const deltaX = Math.abs(currentRect.left - this.originalTilePosition.left);
          const deltaY = Math.abs(currentRect.top - this.originalTilePosition.top);
          
          // Wenn das gedraggte Tile weniger als 20px von seiner ursprünglichen Position entfernt ist, kein Move
          if (deltaX < 20 && deltaY < 20) {
            console.log(`🔧 Gedraggtes Tile ist zu nah an seiner ursprünglichen Position (${deltaX}px, ${deltaY}px) - kein Move`);
            shouldPerformMove = false;
            targetTileIndex = null;
          }
        }
      }
      
      // Setze alle Animationen zurück
      this.resetAllTileAnimations();
      
      // Führe den Move durch, wenn erlaubt
      if (shouldPerformMove && targetTileIndex !== null) {
        console.log(`🔧 Führe Move durch: ${this.draggedTileIndex} → ${targetTileIndex}`);
        this.performMove(this.draggedTileIndex, targetTileIndex);
      }
      
      // Cleanup
      this.isDragging = false;
      this.draggedTileIndex = null;
      this.dragStartX = null;
      this.dragStartY = null;
      this.originalTilePosition = null;
      this.currentlyAnimatingTile = null;
      
      // Entferne alle CSS-Klassen und Hervorhebungen
      this.clearAllHighlights();
      
      console.log(`🔧 Drag beendet, Status zurückgesetzt`);
    },
    
    // Debug-Methode: Zeige aktuellen Drag-Status
    debugDragStatus() {
      console.log('🔍 Aktueller Drag-Status:');
      console.log(`  - isDragging: ${this.isDragging}`);
      console.log(`  - draggedTileIndex: ${this.draggedTileIndex}`);
      console.log(`  - adjacentTilesForHover: [${this.adjacentTilesForHover.join(', ')}]`);
      
      // Zeige alle aktiven CSS-Klassen
      const draggingElements = document.querySelectorAll('.dragging');
      const adjacentElements = document.querySelectorAll('.adjacent-available');
      const hoverElements = document.querySelectorAll('.drag-hover');
      
      console.log(`  - .dragging Elemente: ${draggingElements.length}`);
      console.log(`  - .adjacent-available Elemente: ${adjacentElements.length}`);
      console.log(`  - .drag-hover Elemente: ${hoverElements.length}`);
    },
    
    // DEBUG: Zeige alle Tiles mit CSS-Klassen nach dem Drag-Start
    debugAllTileClasses() {
      console.log('🔍 DEBUG: Alle Tiles mit CSS-Klassen nach Drag-Start:');
      
      // Durchsuche alle Tiles im Board
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i]) { // Nur Tiles die existieren
          const tileElement = document.querySelector(`[data-index="${i}"]`);
          if (tileElement) {
            const hasDragging = tileElement.classList.contains('dragging');
            const hasAdjacent = tileElement.classList.contains('adjacent-available');
            const hasHover = tileElement.classList.contains('drag-hover');
            
            if (hasDragging || hasAdjacent || hasHover) {
              console.log(`  Tile ${i}: .dragging=${hasDragging}, .adjacent-available=${hasAdjacent}, .drag-hover=${hasHover}`);
            }
          }
        }
      }
      
      // Zeige auch alle Tiles mit .adjacent-available Klasse
      const adjacentElements = document.querySelectorAll('.adjacent-available');
      if (adjacentElements.length > 0) {
        console.log(`🔍 Tiles mit .adjacent-available Klasse:`);
        adjacentElements.forEach(element => {
          const index = element.getAttribute('data-index');
          console.log(`  - Tile ${index}`);
        });
      } else {
        console.log(`❌ Keine Tiles mit .adjacent-available Klasse gefunden!`);
      }
    },
    
    onTileMouseEnter(event, tileIndex) {
      // Debug: Zeige alle Event-Parameter
      console.log(`🔧 onTileMouseEnter: Tile ${tileIndex}, isDragging: ${this.isDragging}, draggedTileIndex: ${this.draggedTileIndex}`);
      
      if (!this.isDragging || this.draggedTileIndex === null) {
        console.log(`🔧 Kein aktiver Drag, ignoriere MouseEnter`);
        return;
      }
      
      // Prüfe ob das Tile in der Liste der benachbarten Tiles ist
      if (this.adjacentTilesForHover && this.adjacentTilesForHover.includes(tileIndex)) {
        // Füge Hover-Effekt nur für benachbarte Tiles hinzu
        const tileElement = event.target.closest('.game-tile');
        if (tileElement) {
          tileElement.classList.add('drag-hover');
          console.log(`✅ Hover über benachbartem Tile ${tileIndex} - drag-hover Klasse hinzugefügt`);
        }
      } else {
        console.log(`❌ Hover über NICHT-benachbartem Tile ${tileIndex} - wird ignoriert`);
        
        // WICHTIG: Entferne drag-hover Klasse falls sie fälschlicherweise gesetzt wurde
        const tileElement = event.target.closest('.game-tile');
        if (tileElement && tileElement.classList.contains('drag-hover')) {
          tileElement.classList.remove('drag-hover');
          console.log(`🔧 Entferne fälschliche drag-hover Klasse von Tile ${tileIndex}`);
        }
      }
    },
    
    onTileMouseLeave(event, tileIndex) {
      // Entferne Hover-Effekt
      const tileElement = event.target.closest('.game-tile');
      if (tileElement) {
        tileElement.classList.remove('drag-hover');
      }
    },

    checkObjectives() {
      if (!this.currentLevelData) return;

      // Punkte-Objective
      const scoreObjective = this.currentLevelData.objectives.find(o => o.description.includes('Punkte'));
      if (scoreObjective && !scoreObjective.completed) {
        scoreObjective.completed = this.levelScore >= scoreObjective.target;
      }

      // Matches-Objective
      const matchesObjective = this.currentLevelData.objectives.find(o => o.description.includes('Matches'));
      if (matchesObjective && !matchesObjective.completed) {
        // TODO: Match-Zähler implementieren
        matchesObjective.completed = this.moves >= matchesObjective.target;
      }

      // Züge-Objective
      const movesObjective = this.currentLevelData.objectives.find(o => o.description.includes('Züge'));
      if (movesObjective && !movesObjective.completed) {
        movesObjective.completed = this.moves <= movesObjective.target;
      }
    },

    checkLevelComplete() {
      if (!this.currentLevelData) return;

      const allObjectivesCompleted = this.currentLevelData.objectives.every(o => o.completed);
      if (allObjectivesCompleted) {
        this.calculateLevelStars();
        this.gameActive = false;
        this.showLevelComplete = true;
        
        // Speichere Fortschritt im Backend
        this.saveProgressToBackend();
      }
    },

    // Generiere einen sicheren Hash für Anti-Cheat-Schutz
    generateProgressHash(progressData) {
      // Erstelle einen String mit allen relevanten Daten
      const dataString = `${progressData.levelId}|${progressData.score}|${progressData.moves}|${progressData.stars}|${progressData.isCompleted}|${this.currentLevelData.boardLayout}|${this.currentLevelData.moveLimit}`;
      
      // Verwende eine einfache Hash-Funktion (in Produktion sollte ein stärkerer Hash verwendet werden)
      let hash = 0;
      for (let i = 0; i < dataString.length; i++) {
        const char = dataString.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // Konvertiere zu 32-bit Integer
      }
      
      // Füge einen Salt hinzu (in Produktion sollte dieser geheim gehalten werden)
      const salt = 'YourPart3_Match3_Security_2024';
      const saltedString = `${dataString}|${salt}`;
      
      let saltedHash = 0;
      for (let i = 0; i < saltedString.length; i++) {
        const char = saltedString.charCodeAt(i);
        saltedHash = ((saltedHash << 5) - hash) + char;
        saltedHash = saltedHash & saltedHash;
      }
      
      return Math.abs(saltedHash).toString(16);
    },

    saveProgressToBackend() {
      // Prüfe ob Benutzer eingeloggt ist
      if (!this.$store.getters.isLoggedIn || !this.$store.getters.user) {
        return; // Kein Fortschritt speichern wenn nicht eingeloggt
      }

      // WICHTIG: Speichere den Fortschritt nur wenn das Level abgeschlossen ist
              // Ein Level ist nur abgeschlossen, wenn es mindestens 1 Stern gibt UND der Score > 0 ist
        if (this.levelStars === 0 || this.levelScore === 0) {
          return; // Kein Fortschritt speichern wenn das Level nicht abgeschlossen ist
        }
        
        // Zusätzliche Sicherheit: Prüfe ob das Level wirklich abgeschlossen ist
        if (!this.gameActive || this.showLevelComplete) {
        } else {
        console.warn('WARNUNG: Versuche Fortschritt zu speichern, obwohl Level noch aktiv ist!');
        return; // Kein Fortschritt speichern wenn das Level noch aktiv ist
      }

      const progressData = {
        levelId: this.currentLevel,
        score: this.levelScore,
        moves: this.moves,
        time: 0, // TODO: Zeit implementieren
        stars: this.levelStars,
        isCompleted: true,
        totalScore: this.score,
        totalStars: this.stars
        // WICHTIG: levelsCompleted wird vom Backend berechnet, nicht vom Frontend gesendet
      };

      // Generiere Anti-Cheat-Hash
      const securityHash = this.generateProgressHash(progressData);

      // Füge Hash zu den Daten hinzu
      const secureProgressData = {
        ...progressData,
        securityHash: securityHash,
        timestamp: Date.now()
      };

      apiClient.post(`/api/match3/campaigns/1/levels/${this.currentLevel}/progress`, secureProgressData)
        .then(response => {
          if (response.data.success) {
            // Fortschritt erfolgreich gespeichert
          }
        })
        .catch(error => {
          console.error('Fehler beim Speichern des Fortschritts:', error);
        });
    },

    calculateLevelStars() {
      let starCount = 0;
      
      // 1 Stern für Level-Abschluss
      starCount++;
      
      // 1 Stern für gute Punktzahl
      if (this.levelScore >= this.currentLevelData.objectives[0].target * 1.5) {
        starCount++;
      }
      
      // 1 Stern für effiziente Züge
      const movesObjective = this.currentLevelData.objectives.find(o => o.description.includes('Züge'));
      if (movesObjective && this.moves <= movesObjective.target * 0.8) {
        starCount++;
      }

      this.levelStars = starCount;
      this.stars += starCount;
    },

    async nextLevel() {
      
      this.showLevelComplete = false;
      // WICHTIG: completedLevels wird vom Backend berechnet, nicht hier erhöht
      this.currentLevel++;
      
      // Prüfe ob das nächste Level existiert
      if (this.campaignData && this.campaignData.levels) {
        const nextLevelExists = this.campaignData.levels.some(l => l.order === this.currentLevel);
        if (!nextLevelExists) {
          this.showCampaignComplete = true;
          return;
        }
      }
      
      // Speichere den Fortschritt nur wenn das Level abgeschlossen ist
      if (this.levelStars > 0) {
        this.saveProgressToBackend();
      }
      
      // Alle Level-spezifischen Eigenschaften zurücksetzen
      this.levelScore = 0;
      this.levelStars = 0;
      this.moves = 0;
      this.matchesMade = 0;
      this.cascadeRound = 0;
      
      // WICHTIG: Alle Arrays zurücksetzen
      this.matchedTiles = [];
      this.fallingTiles = [];
      this.newTiles = [];
      this.isFalling = false;
      
      // WICHTIG: Lade nur die spezifischen Level-Daten
      try {
        await this.loadLevelData(this.currentLevel);
        // WICHTIG: Warte bis das Level vollständig initialisiert ist
        await this.$nextTick();
        // initializeLevel wird bereits in loadLevelData aufgerufen
      } catch (error) {
        console.error('❌ Fehler beim Neustarten des Levels:', error);
        this.handleLoadError('Level konnte nicht neu gestartet werden', error);
      }
    },

    async restartLevel() {
      
      this.showLevelComplete = false;
      this.showPause = false;
      
      // Alle Level-spezifischen Eigenschaften zurücksetzen
      this.levelScore = 0;
      this.levelStars = 0;
      this.moves = 0;
      this.matchesMade = 0;
      this.cascadeRound = 0;
      
      // WICHTIG: Alle Arrays zurücksetzen
      this.matchedTiles = [];
      this.fallingTiles = [];
      this.newTiles = [];
      this.isFalling = false;
      
      // WICHTIG: Lade nur die spezifischen Level-Daten
      try {
        await this.loadLevelData(this.currentLevel);
        // WICHTIG: Warte bis das Level vollständig initialisiert ist
        await this.$nextTick();
        // initializeLevel wird bereits in loadLevelData aufgerufen
      } catch (error) {
        console.error('❌ Fehler beim Neustarten des Levels:', error);
        this.handleLoadError('Level konnte nicht neu gestartet werden', error);
      }
      
      // Zusätzliche Prüfung: Stelle sicher, dass das neue Board keine initialen Matches hat
      setTimeout(() => {
        if (this.board && this.board.length > 0) {
          const initialMatches = this.findMatchesOnBoard(this.board, false); // Reduziere Debug-Ausgaben
          if (initialMatches.length > 0) {
            this.fixInitialMatches();
          }
        }
      }, 100);
    },

    async restartCampaign() {
      this.showCampaignComplete = false;
      
      // Speichere den aktuellen Fortschritt nur wenn das Level abgeschlossen ist
      if (this.levelStars > 0) {
        this.saveProgressToBackend();
      }
      
      this.currentLevel = 1;
      this.score = 0;
      this.stars = 0;
      this.completedLevels = 0;
      
      // WICHTIG: Alle Arrays zurücksetzen
      this.matchedTiles = [];
      this.fallingTiles = [];
      this.newTiles = [];
      this.isFalling = false;
      this.cascadeRound = 0;
      
      // WICHTIG: Lade Kampagnendaten für Kampagnen-Restart
      try {
        await this.loadCampaignData();
        // WICHTIG: Warte bis das Level vollständig initialisiert ist
        await this.$nextTick();
        // initializeLevel wird bereits in loadCampaignData aufgerufen
      } catch (error) {
        console.error('❌ Fehler beim Neustarten der Kampagne:', error);
        this.handleLoadError('Kampagne konnte nicht neu gestartet werden', error);
      }
      
      // Zusätzliche Prüfung: Stelle sicher, dass das neue Board keine initialen Matches hat
      setTimeout(() => {
        if (this.board && this.board.length > 0) {
          const initialMatches = this.findMatchesOnBoard(this.board, false); // Reduziere Debug-Ausgaben
          if (initialMatches.length > 0) {
            this.fixInitialMatches();
          }
        }
      }, 100);
    },

    pauseGame() {
      this.gameActive = false;
      this.showPause = true;
    },

    resumeGame() {
      this.gameActive = true;
      this.showPause = false;
    },

    toggleStats() {
      this.statsExpanded = !this.statsExpanded;
    },

    toggleLevelDescription() {
      this.levelDescriptionExpanded = !this.levelDescriptionExpanded;
    },

    getTileColor(type) {
      const colors = {
        gem: '#FF6B6B',
        star: '#FFD93D',
        heart: '#FF8E8E',
        diamond: '#4ECDC4',
        circle: '#95E1D3',
        square: '#A8E6CF'
      };
      return colors[type] || '#666';
    },

    getTileIcon(type) {
      const icons = {
        gem: 'mdi-diamond-stone',
        star: 'mdi-star',
        heart: 'mdi-heart',
        diamond: 'mdi-diamond',
        circle: 'mdi-circle',
        square: 'mdi-square'
      };
      return icons[type] || 'mdi-help';
    },

    getTileSymbol(type) {
      const symbols = {
        gem: '💎',
        star: '⭐',
        heart: '❤️',
        diamond: '🔷',
        circle: '⭕',
        square: '🟦',
        crown: '👑',
        rainbow: '🌈',
        // Spezielle Items
        rocket: '🚀',
        'rocket-horizontal': '🚀',
        'rocket-vertical': '🚀',
        bomb: '💣'
      };
      return symbols[type] || '❓';
    },

    // Neue Methode: Board-Layout parsen
    parseBoardLayout(layoutString) {
      if (!layoutString) return [];
      
      // Teile den String in Zeilen auf
      const rows = layoutString.split('\n').filter(row => row.trim().length > 0);
      const layout = [];
      
      for (let row = 0; row < rows.length; row++) {
        const rowString = rows[row];
        const rowArray = [];
        
        for (let col = 0; col < rowString.length; col++) {
          const char = rowString[col];
          // Backend-Format: 'x' = Feld (tile), 'o' = kein Feld, andere = spezifischer Tile-Typ
          // Fallback-Format: 't' = Feld (tile), 'f' = kein Feld
          if (char === 'o' || char === 'f') {
            rowArray.push({ type: 'empty', char: char });
          } else if (char === 'x' || char === 't') {
            rowArray.push({ type: 'tile', char: char });
          } else {
            // Spezifischer Tile-Typ
            rowArray.push({ type: 'specific', char: char });
          }
        }
        
        layout.push(rowArray);
      }
      
      return layout;
    },

    // Neue Methode: Board basierend auf Layout generieren
    generateBoardFromLayout() {
      const board = [];
      let attempts = 0;
      const maxAttempts = 100;
      
      do {
        board.length = 0; // Board leeren
        
        // Gehe durch jede Zeile und Spalte des Layouts
        for (let row = 0; row < this.boardHeight; row++) {
          for (let col = 0; col < this.boardWidth; col++) {
            // Prüfe ob an dieser Position ein Feld sein soll
            if (this.boardLayout[row] && this.boardLayout[row][col]) {
              const layoutCell = this.boardLayout[row][col];
              
              if (layoutCell.type === 'empty') {
                // Kein Feld - null hinzufügen
                board.push(null);
              } else if (layoutCell.type === 'tile') {
                // Tile-Feld - zufälliger Tile-Typ (nur normale Tiles, keine Power-Ups)
                const tileType = this.tileTypes[Math.floor(Math.random() * this.tileTypes.length)];
                const tile = {
                  type: tileType,
                  id: Date.now() + row * this.boardWidth + col + Math.random(),
                  row: row,
                  col: col
                };
                board.push(tile);
              } else if (layoutCell.type === 'specific') {
                // Spezifischer Tile-Typ basierend auf dem Char
                let tileType = 'gem'; // Standard
                if (layoutCell.char === 'g') tileType = 'gem';
                else if (layoutCell.char === 'c') tileType = 'crown';
                else if (layoutCell.char === 'r') tileType = 'rainbow';
                else {
                  // Fallback für unbekannte Zeichen - verwende zufälligen Tile-Typ
                  tileType = this.tileTypes[Math.floor(Math.random() * this.tileTypes.length)];
                }
                
                const tile = {
                  type: tileType,
                  id: Date.now() + row * this.boardWidth + col + Math.random(),
                  row: row,
                  col: col
                };
                board.push(tile);
              }
            } else {
              // Kein Feld - null hinzufügen
              board.push(null);
            }
          }
        }
        
        attempts++;
        
        // Prüfe auf initiale Matches
        const initialMatches = this.findMatchesOnBoard(board, false); // Reduziere Debug-Ausgaben
        if (initialMatches.length === 0) {
          break;
        }
      } while (attempts < maxAttempts);
      
      return board;
    },

    // Hilfsmethode: Index zu Koordinaten konvertieren
    indexToCoords(index) {
      if (index === null || index < 0) return { row: -1, col: -1 };
      
      const row = Math.floor(index / this.boardWidth);
      const col = index % this.boardWidth;
      return { row, col };
    },

    // Hilfsmethode: Koordinaten zu Index konvertieren
    coordsToIndex(row, col) {
      if (row < 0 || row >= this.boardHeight || col < 0 || col >= this.boardWidth) return null;
      return row * this.boardWidth + col;
    },

    // Hilfsmethode: Prüfe ob Position im Layout gültig ist
    isValidPosition(row, col) {
      // Prüfe Board-Grenzen
      if (row < 0 || row >= this.boardHeight || col < 0 || col >= this.boardWidth) {
        return false;
      }
      
      // Prüfe Board-Layout
      if (this.boardLayout && this.boardLayout[row] && this.boardLayout[row][col]) {
        const layoutCell = this.boardLayout[row][col];
        // Alle Positionen sind gültig, auch leere Felder werden gerendert
        return true;
      }
      
      // Fallback: Alle Positionen innerhalb der Board-Grenzen sind gültig
      return true;
    },

    // Hilfsmethode: Prüfe ob ein Tile ein Power-Up ist
    isPowerUpTile(tile) {
      return tile && this.powerUpTypes.includes(tile.type);
    },

    // Hilfsmethode: Prüfe ob zwei Tiles matchen können
    canTilesMatch(tile1, tile2) {
      // Power-Up Tiles können nicht mit anderen Tiles matchen (auch nicht mit sich selbst)
      if (this.isPowerUpTile(tile1) || this.isPowerUpTile(tile2)) {
        return false;
      }
      // Normale Tiles können nur mit dem gleichen Typ matchen
      return tile1 && tile2 && tile1.type === tile2.type;
    },

    // Hilfsmethode: Zeige Fortschritt für Level-Objekte
    getObjectiveProgress(objective) {
      switch (objective.type) {
        case 'score':
          return `${this.levelScore}/${objective.target}`;
        case 'matches':
          return `${this.matchesMade}/${objective.target}`;
        case 'moves':
          return `${this.moves}/${objective.target}`;
        default:
          return 'N/A';
      }
    },

    // Neue Methode: Erstelle spezielle Items basierend auf der Match-Anordnung
    createSpecialItems(matches) {
      const powerUpPositions = new Set(); // Sammle Positionen, wo Power-Ups erstellt werden
      
      matches.forEach(match => {
        if (match.length >= 4) {
          // Mindestens 4 Felder gematcht - prüfe auf spezielle Anordnungen
          const specialItem = this.detectSpecialItemPattern(match);
          if (specialItem) {
            // Erstelle das spezielle Item an der ersten Position des Matches
            const centerIndex = match[Math.floor(match.length / 2)];
            this.createSpecialItem(centerIndex, specialItem);
            powerUpPositions.add(centerIndex);
          }
        }
      });
      
      // Entferne Power-Up Positionen aus den Matches, damit sie nicht als normale Matches behandelt werden
      return powerUpPositions;
    },

    // Neue Methode: Erkenne spezielle Item-Muster
    detectSpecialItemPattern(match) {
      if (match.length < 4) return null;

      // Konvertiere Match-Indizes zu Koordinaten
      const coords = match.map(index => this.indexToCoords(index));
      
      // WICHTIG: Prüfe zuerst die komplexesten Muster (höchste Priorität)
      // UND stelle sicher, dass nur EIN Pattern erkannt wird
      
      // Prüfe auf I-Form (Regenbogen) - höchste Priorität, mindestens 5 Tiles
      if (coords.length >= 5 && this.isIRainbow(coords)) {
        return 'rainbow';
      }
      
      // Prüfe auf L-Form (Bombe) - zweite Priorität, mindestens 5 Tiles
      if (coords.length >= 5 && this.isLBomb(coords)) {
        return 'bomb';
      }
      
      // Prüfe auf T-Form (Bombe) - dritte Priorität, mindestens 5 Tiles
      if (coords.length >= 5 && this.isTBomb(coords)) {
        return 'bomb';
      }
      
      // Prüfe auf Kreuz-Form (Bombe) - vierte Priorität, mindestens 5 Tiles
      if (coords.length >= 5 && this.isCrossBomb(coords)) {
        return 'bomb';
      }
      
      // Prüfe auf horizontale Anordnung (Rakete) - niedrigste Priorität, mindestens 4 Tiles
      if (coords.length >= 4 && this.isHorizontalRocket(coords)) {
        return 'rocket';
      }
      
      // Prüfe auf vertikale Anordnung (Rakete) - niedrigste Priorität, mindestens 4 Tiles
      if (coords.length >= 4 && this.isVerticalRocket(coords)) {
        return 'rocket';
      }
      
      return null;
    },

    // Hilfsmethode: Prüfe auf horizontale Rakete (4+ Felder in einer Reihe)
    isHorizontalRocket(coords) {
      if (coords.length < 4) return false;
      
      // Alle Koordinaten müssen in der gleichen Zeile sein
      const row = coords[0].row;
      return coords.every(coord => coord.row === row);
    },

    // Hilfsmethode: Prüfe auf vertikale Rakete (4+ Felder in einer Spalte)
    isVerticalRocket(coords) {
      if (coords.length < 4) return false;
      
      // Alle Koordinaten müssen in der gleichen Spalte sein
      const col = coords[0].col;
      return coords.every(coord => coord.col === col);
    },

    // Hilfsmethode: Prüfe auf L-Form Bombe
    isLBomb(coords) {
      // L-Form Bombe benötigt mindestens 5 Tiles
      if (coords.length < 5) {
        return false;
      }
      
      // Für 5+ Tiles: Suche nach L-Form mit langen Zeilen/Spalten
      const rows = new Set(coords.map(c => c.row));
      const cols = new Set(coords.map(c => c.col));
      
      // L-Form: Mindestens 3 Zeilen UND 3 Spalten
      if (rows.size >= 3 && cols.size >= 3) {
        // Prüfe ob es eine echte L-Form gibt
        return this.hasLShape(coords);
      }
      
      return false;
    },

    // Hilfsmethode: Prüfe auf T-Form Bombe
    isTBomb(coords) {
      if (coords.length < 5) return false; // Mindestens 5 Tiles für T-Form Bombe
      
      // Suche nach T-Form: 3+ horizontal + 3+ vertikal
      const rows = new Set(coords.map(c => c.row));
      const cols = new Set(coords.map(c => c.col));
      
      // Mindestens 3 Zeilen und 3 Spalten
      if (rows.size >= 3 && cols.size >= 3) {
        // Prüfe ob es eine T-Form gibt
        return this.hasTShape(coords);
      }
      
      return false;
    },

    // Hilfsmethode: Prüfe auf Kreuz-Form Bombe
    isCrossBomb(coords) {
      if (coords.length < 5) return false; // Mindestens 5 Tiles für Kreuz-Form Bombe
      
      // Suche nach Kreuz-Form: 3+ horizontal + 3+ vertikal
      const rows = new Set(coords.map(c => c.row));
      const cols = new Set(coords.map(c => c.col));
      
      // Mindestens 3 Zeilen und 3 Spalten
      if (rows.size >= 3 && cols.size >= 3) {
        // Prüfe ob es eine Kreuz-Form gibt
        return this.hasCrossShape(coords);
      }
      
      return false;
    },

    // Hilfsmethode: Prüfe auf I-Form Regenbogen (genau 5 Felder in einer Reihe/Spalte)
    isIRainbow(coords) {
      if (coords.length !== 5) return false; // Genau 5 Tiles für Regenbogen
      
      // Alle Koordinaten müssen in der gleichen Zeile ODER Spalte sein
      const row = coords[0].row;
      const col = coords[0].col;
      
      return coords.every(coord => coord.row === row) || 
             coords.every(coord => coord.col === col);
    },



    // Hilfsmethode: Prüfe auf L-Form
    hasLShape(coords) {
      if (coords.length < 5) return false; // Mindestens 5 Tiles für L-Form
      
      // Gruppiere nach Zeilen und Spalten
      const rowGroups = {};
      const colGroups = {};
      
      coords.forEach(coord => {
        if (!rowGroups[coord.row]) rowGroups[coord.row] = [];
        if (!colGroups[coord.col]) colGroups[coord.col] = [];
        rowGroups[coord.row].push(coord);
        colGroups[coord.col].push(coord);
      });
      
      // Prüfe auf L-Form: Eine Zeile mit 3+ Tiles UND eine Spalte mit 3+ Tiles
      // und sie müssen sich an einer Ecke treffen
      const rows = Object.keys(rowGroups).map(r => parseInt(r));
      const cols = Object.keys(colGroups).map(c => parseInt(c));
      
      // Finde Zeilen mit mindestens 3 Tiles
      const longRows = rows.filter(row => rowGroups[row].length >= 3);
      // Finde Spalten mit mindestens 2 Tiles (für L-Form reicht das)
      const longCols = cols.filter(col => colGroups[col].length >= 2);
      
      // Prüfe ob eine lange Zeile und eine lange Spalte sich schneiden
      for (const row of longRows) {
        for (const col of longCols) {
          // Prüfe ob es ein Tile an der Kreuzung gibt
          const intersection = coords.find(coord => coord.row === row && coord.col === col);
          if (intersection) {
            // Prüfe ob es wirklich eine L-Form ist
            const rowTiles = rowGroups[row];
            const colTiles = colGroups[col];
            
            // L-Form: horizontale Linie + vertikale Linie, die sich treffen
            if (rowTiles.length >= 3 && colTiles.length >= 2) {
              return true;
            }
          }
        }
      }
      
      return false;
    },

        // Hilfsmethode: Prüfe auf T-Form
    hasTShape(coords) {
      if (coords.length < 5) return false; // Mindestens 5 Tiles für T-Form
      
      // Gruppiere nach Zeilen und Spalten
      const rowGroups = {};
      const colGroups = {};
      
      coords.forEach(coord => {
        if (!rowGroups[coord.row]) rowGroups[coord.row] = [];
        if (!colGroups[coord.col]) colGroups[coord.col] = [];
        rowGroups[coord.row].push(coord);
        colGroups[coord.col].push(coord);
        });
      
      // Finde Zeilen und Spalten mit mindestens 3 Tiles
      const longRows = Object.values(rowGroups).filter(group => group.length >= 3);
      const longCols = Object.values(colGroups).filter(group => group.length >= 3);
      
      // T-Form: mindestens eine lange Zeile UND eine lange Spalte
      // Zusätzlich: mindestens ein Tile muss an der Kreuzung sein
      if (longRows.length > 0 && longCols.length > 0) {
        // Prüfe ob es eine Kreuzung gibt
        const intersection = coords.filter(coord => 
          longRows.some(row => row.some(r => r.row === coord.row)) &&
          longCols.some(col => col.some(c => c.col === coord.col))
        );
        
        return intersection.length > 0;
      }
      return false;
    },

    // Hilfsmethode: Prüfe auf Kreuz-Form
    hasCrossShape(coords) {
      if (coords.length < 5) return false; // Mindestens 5 Tiles für Kreuz-Form
      
      // Gruppiere nach Zeilen und Spalten
      const rowGroups = {};
      const colGroups = {};
      
      coords.forEach(coord => {
        if (!rowGroups[coord.row]) rowGroups[coord.row] = [];
        if (!colGroups[coord.col]) colGroups[coord.col] = [];
        rowGroups[coord.row].push(coord);
        colGroups[coord.col].push(coord);
        });
      
      // Finde Zeilen und Spalten mit mindestens 3 Tiles
      const longRows = Object.values(rowGroups).filter(group => group.length >= 3);
      const longCols = Object.values(colGroups).filter(group => group.length >= 3);
      
      // Kreuz-Form: mindestens eine lange Zeile UND eine lange Spalte
      // Zusätzlich: mindestens ein Tile muss an der Kreuzung sein
      if (longRows.length > 0 && longCols.length > 0) {
        // Prüfe ob es eine Kreuzung gibt
        const intersection = coords.filter(coord => 
          longRows.some(row => row.some(r => r.row === coord.row)) &&
          longCols.some(col => col.some(c => c.col === coord.col))
        );
        
        return intersection.length > 0;
      }
      return false;
    },

    // Neue Methode: Erstelle ein spezielles Item
    createSpecialItem(index, itemType) {
      if (!this.board[index]) return;
      
      // Erstelle das spezielle Item
      const specialItem = {
        type: itemType,
        id: Date.now() + index + Math.random(),
        row: this.indexToCoords(index).row,
        col: this.indexToCoords(index).col,
        isSpecial: true,
        specialType: itemType
      };
      
      // Ersetze das normale Tile mit dem speziellen Item
      this.board[index] = specialItem;
      
      // Zeige eine visuelle Bestätigung
      this.showSpecialItemCreated(index, itemType);
    },

    // Neue Methode: Zeige visuelle Bestätigung für erstelltes spezielles Item
    showSpecialItemCreated(index, itemType) {
      const tileElement = document.querySelector(`[data-index="${index}"]`);
      if (tileElement) {
        // Füge eine spezielle Klasse hinzu
        tileElement.classList.add('special-item-created');
        
        // Zeige eine kurze Animation
        setTimeout(() => {
          tileElement.classList.remove('special-item-created');
        }, 1000);
      }
    },

    // Neue Methode: Zähle Power-Up als Zug
    countPowerUpMove() {
      this.moves++;
      this.movesLeft--;
    },

    // Neue Methode: Behandle Doppelklick auf Power-Up Tiles
    async handleDoubleClick(index, event) {
      event.preventDefault();
      event.stopPropagation();
      
      const tile = this.board[index];
      if (!tile) return;
      
      // Prüfe auf Raketen-Tiles (neue Power-ups)
      if (this.isRocketTile(tile.type)) {
        console.log(`🚀 Doppelklick auf Rakete ${tile.type} an Position ${index}`);
        // Rakete durch Doppelklick aktivieren
        await this.activateRocketByDoubleClick(index);
        return;
      }
      
      // Prüfe auf Bomben-Tiles (neue Power-ups)
      if (tile.type === 'bomb') {
        console.log(`💣 Doppelklick auf Bombe an Position ${index}`);
        // Bombe durch Doppelklick aktivieren
        await this.activateBombByDoubleClick(index);
        return;
      }
      
      // Prüfe auf Regenbogen-Tiles
      if (tile.type === 'rainbow') {
        console.log(`🌈 Doppelklick auf Regenbogen-Tile an Position ${index}`);
        // Regenbogen-Tile durch Doppelklick aktivieren
        await this.activateRainbowByDoubleClick(index);
        return;
      }
        },
    
    // Aktiviere Rakete durch Doppelklick
    async activateRocketByDoubleClick(rocketIndex) {
      console.log(`🚀 Aktiviere Rakete durch Doppelklick an Position ${rocketIndex}`);
      
      // Hole alle Tiles um die Rakete herum
      const tilesToRemove = this.getRocketExplosionTiles(rocketIndex);
      
      if (tilesToRemove.size > 0) {
        console.log(`🚀 Entferne ${tilesToRemove.size} Tiles um Rakete herum`);
        
        // Starte Schrumpf-Animation für alle zu entfernenden Tiles
        await this.animateTileRemoval(Array.from(tilesToRemove));
        
        // Entferne alle Tiles nach der Animation
        tilesToRemove.forEach(index => {
          if (this.board[index]) {
            console.log(`🚀 Entferne Tile ${this.board[index].type} an Position ${index}`);
            this.board[index] = null;
          }
        });
        
        // Entferne auch die Rakete selbst
        console.log(`🚀 Entferne Rakete an Position ${rocketIndex}`);
        this.board[rocketIndex] = null;
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
        
        // Zeige Raketen-Explosions-Animation
        await this.showRocketExplosionAnimation(rocketIndex);
        
        // Führe Fall-Down-Logik aus
        await this.fallTilesDown();
        
        // Fülle leere Positionen mit neuen Tiles auf
        await this.fillEmptyPositions();
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
      }
    },
    
    // Aktiviere Bombe durch Doppelklick
    async activateBombByDoubleClick(bombIndex) {
      console.log(`💣 Aktiviere Bombe durch Doppelklick an Position ${bombIndex}`);
      
      // Spiele Bomben-Sound
      this.playSound('bomb');
      
      // Zeige Bomben-Explosions-Animation
      await this.showBombEffectAnimation(bombIndex);
      
      // Aktiviere die Bombe (3x3 Bereich)
      this.explodeBomb(bombIndex, 1, true);
      
      // Entferne die Bombe selbst
      console.log(`💣 Entferne Bombe an Position ${bombIndex}`);
      this.board[bombIndex] = null;
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
      
      // Führe Fall-Down-Logik aus
      await this.fallTilesDown();
      
      // Fülle leere gültige Felder mit neuen Tiles auf
      await this.checkAndFillEmptyValidFields();
      
              // Erhöhe den Zug-Zähler
        this.countPowerUpMove();
    },
    
    // Aktiviere Regenbogen-Tile durch Doppelklick
    async activateRainbowByDoubleClick(rainbowIndex) {
      console.log(`🌈 Regenbogen-Tile an Position ${rainbowIndex} durch Doppelklick aktiviert`);
      
      // Wähle zufällig eine vorhandene Tile-Art aus (außer Power-ups)
      const availableTypes = this.getAvailableTileTypes();
      if (availableTypes.length === 0) {
        console.log('⚠️ Keine verfügbaren Tile-Typen für Regenbogen-Aktivierung');
        return;
      }
      
      const randomType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
      console.log(`🌈 Zufällig ausgewählter Tile-Typ: ${randomType}`);
      
      // Aktiviere den Regenbogen mit dem zufälligen Typ
      await this.activateRainbow(rainbowIndex, null, randomType);
    },
    
    // Neue Methode: Entferne alle Tiles eines bestimmten Typs
    removeAllTilesOfType(tileType) {
      const tilesToRemove = [];
      
      // Sammle alle Indizes der zu entfernenden Tiles
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type === tileType) {
          tilesToRemove.push(i);
        }
      }
      
      if (tilesToRemove.length > 0) {
        // Zeige Regenbogen-Effekt-Animation für das erste Tile
        if (tilesToRemove.length > 0) {
          this.showRainbowEffectAnimation(tilesToRemove[0]);
        }
        
        // Entferne die Tiles (außer Regenbögen)
        tilesToRemove.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation
        this.startFallAnimation(tilesToRemove);
        
        // Punkte hinzufügen
        const points = tilesToRemove.length * 20 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
      }
    },

    // Hilfsmethode: Hole alle verfügbaren Tile-Typen (außer Power-ups)
    getAvailableTileTypes() {
      const types = new Set();
      
      // Sammle alle Tile-Typen vom Board (außer Power-ups)
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && !this.isPowerUpTile(this.board[i].type)) {
          types.add(this.board[i].type);
        }
      }
      
      return Array.from(types);
    },
    
    // Neue Methode: Aktiviere Regenbogen-Tile durch Doppelklick
    async activateRainbowByDoubleClick(rainbowIndex) {
      console.log(`🌈 Aktiviere Regenbogen-Tile durch Doppelklick an Position ${rainbowIndex}`);
      
      // Wähle zufällig eine vorhandene Tile-Art aus (außer Power-ups)
      const availableTypes = this.getAvailableTileTypes();
      if (availableTypes.length === 0) {
        console.log('⚠️ Keine verfügbaren Tile-Typen für Regenbogen-Aktivierung');
        return;
      }
      
      const randomType = availableTypes[Math.floor(Math.random() * availableTypes.length)];
      console.log(`🌈 Zufällig ausgewählter Tile-Typ: ${randomType}`);
      
      // Aktiviere den Regenbogen mit dem zufälligen Typ
      await this.activateRainbowByType(rainbowIndex, randomType);
    },
    
    // Neue Methode: Aktiviere Regenbogen-Tile mit spezifischem Typ
    async activateRainbowByType(rainbowIndex, targetType) {
      console.log(`🌈 Aktiviere Regenbogen-Tile an Position ${rainbowIndex} mit Typ: ${targetType}`);
      
      // Spiele Regenbogen-Sound
      this.playSound('rainbow');
      
      // Überspringe Power-ups
      if (this.isPowerUpTile(targetType)) {
        console.log(`⚠️ Überspringe Power-up Typ: ${targetType}`);
        return;
      }
      
      console.log(`🌈 Entferne alle Tiles vom Typ: ${targetType}`);
      
      // Sammle alle Tiles des Ziel-Typs
      const tilesToRemove = [];
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type === targetType) {
          tilesToRemove.push(i);
        }
      }
      
      if (tilesToRemove.length === 0) {
        console.log(`⚠️ Keine Tiles vom Typ ${targetType} gefunden`);
        return;
      }
      
      // Zeige Regenbogen-Effekt-Animation
      await this.showRainbowEffectAnimation(rainbowIndex);
      
      // Starte Schrumpf-Animation für alle zu entfernenden Tiles
      await this.animateTileRemoval(tilesToRemove);
      
      // Entferne alle Tiles des Ziel-Typs
      tilesToRemove.forEach(index => {
        this.board[index] = null;
      });
      
      // Entferne den Regenbogen selbst
      this.board[rainbowIndex] = null;
      
      // Aktualisiere die Anzeige
      this.$forceUpdate();
      
      // Führe Fall-Down-Logik aus
      await this.fallTilesDown();
      
      // Fülle leere gültige Felder mit neuen Tiles auf
      await this.checkAndFillEmptyValidFields();
      
              // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Punkte hinzufügen (Regenbogen-Aktivierung)
      const points = tilesToRemove.length * 25 * this.currentLevel;
      this.levelScore += points;
      this.score += points;
      
      console.log(`🌈 ${tilesToRemove.length} Tiles vom Typ ${targetType} entfernt, +${points} Punkte`);
      
              // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
        if (!this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach Regenbogen-Aktivierung: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Prüfe Level-Objekte nach der Regenbogen-Aktivierung
        if (!this.isInitializingLevel) {
          console.log('🎯 Prüfe Level-Objekte nach Regenbogen-Aktivierung...');
          this.checkLevelObjectives();
        }
    },
    
    // Neue Methode: Behandle Power-Up Tile Tausch
    async handleRainbowSwap(originalTile1, originalTile2) {
      // Power-Up Tausch als Zug zählen (wird auch über swapTiles aufgerufen)
      // WICHTIG: Zähle den Zug nur einmal hier, nicht in den nachfolgenden Funktionen
      this.countPowerUpMove();
      
      if (originalTile1.type === 'rainbow' && originalTile2.type === 'rainbow') {
        // Spiele Regenbogen-Sound
        this.playSound('rainbow');
        
        // Zwei Regenbogen-Tiles getauscht: Entferne alle Tiles vom gesamten Board
        console.log('🌈 Zwei Regenbogen-Tiles kombiniert - entferne alle Tiles vom Board!');
        await this.removeAllTilesFromBoardIncludingRainbows();
        return true;
      } else if (originalTile1.type === 'rainbow' || originalTile2.type === 'rainbow') {
        // Spiele Regenbogen-Sound
        this.playSound('rainbow');
        
        // Ein Regenbogen-Tile mit normalem Tile getauscht: Entferne alle Tiles des normalen Typs
        const normalTile = originalTile1.type === 'rainbow' ? originalTile2 : originalTile1;
        const rainbowIndex = originalTile1.type === 'rainbow' ? this.findTileIndex(originalTile1) : this.findTileIndex(originalTile2);
        
        if (rainbowIndex !== null) {
          await this.activateRainbowByType(rainbowIndex, normalTile.type);
        }
        return true;
      } else if (originalTile1.type === 'bomb' && originalTile2.type === 'bomb') {
        // Zwei Bomben-Tiles getauscht: Entferne 2 Ringe (5x5 Bereich)
        const bombIndex = this.findBombIndex(originalTile1, originalTile2);
        if (bombIndex !== null) {
          this.explodeBomb(bombIndex, 2, true); // 2 Ringe = 5x5 Bereich - manuelle Aktivierung
        }
        return true;
      } else if (originalTile1.type === 'bomb' || originalTile2.type === 'bomb') {
        // Ein Bomben-Tile mit normalem Tile getauscht: Entferne 9 Tiles rund um das Ziel
        const bombTile = originalTile1.type === 'bomb' ? originalTile1 : originalTile2;
        const targetTile = originalTile1.type === 'bomb' ? originalTile2 : originalTile1;
        
        // Finde die neue Position der Bombe
        const newBombIndex = this.findTileIndex(bombTile);
        if (newBombIndex !== null) {
          this.explodeBomb(newBombIndex, 1, true); // 1 Ring = 3x3 Bereich - manuelle Aktivierung
        }
        return true;
      } else if ((originalTile1.type === 'bomb' && originalTile2.type === 'rainbow') ||
                 (originalTile1.type === 'rainbow' && originalTile2.type === 'bomb')) {
        // Spiele Regenbogen-Sound
        this.playSound('rainbow');
        
        // Bombe + Regenbogen: Erstelle zufällige Bomben und löse sie aus
        this.createRandomBombs(20);
        setTimeout(() => {
          this.detonateAllBombs();
        }, 500); // Kurze Verzögerung für visuellen Effekt
        return true;
      } else if (originalTile1.type === 'rocket' && originalTile2.type === 'rocket') {
        // Zwei Raketen verbunden: Lösche Nachbarfelder beider Raketen und starte 3 Raketen
        this.handleRocketConnection(originalTile1, originalTile2);
        return true;
      } else if ((originalTile1.type === 'rocket' && originalTile2.type === 'rainbow') ||
                 (originalTile1.type === 'rainbow' && originalTile2.type === 'rocket')) {
        // Spiele Regenbogen-Sound
        this.playSound('rainbow');
        
        // Rakete + Regenbogen: Erstelle zufällige Raketen und starte sie
        this.createRandomRockets(10);
        setTimeout(() => {
          this.launchAllRockets();
        }, 500); // Kurze Verzögerung für visuellen Effekt
        return true;
      } else if ((originalTile1.type === 'rocket' && originalTile2.type === 'bomb') ||
                 (originalTile1.type === 'bomb' && originalTile2.type === 'rocket')) {
        // Rakete + Bombe: Lösche 4 Nachbarfelder und starte Bomben-Rakete
        this.handleRocketBombCombination(originalTile1, originalTile2);
        return true;
      } else if (originalTile1.type === 'rocket' || originalTile2.type === 'rocket') {
        // Eine Rakete mit normalem Tile: Rakete fliegt auf zufälliges Feld
        const rocketTile = originalTile1.type === 'rocket' ? originalTile1 : originalTile2;
        const targetTile = originalTile1.type === 'rocket' ? originalTile2 : originalTile1;
        this.handleRocketLaunch(rocketTile, targetTile);
        return true;
      }
      return false; // Kein Power-Up Tausch
    },

    // Hilfsmethode: Finde den Index einer Bombe nach dem Tausch
    findBombIndex(originalBomb1, originalBomb2) {
      // Suche nach der Bombe auf dem Board
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type === 'bomb') {
          return i;
        }
      }
      return null;
    },

    // Hilfsmethode: Finde den Index eines Tiles nach dem Tausch
    findTileIndex(originalTile) {
      // Suche nach dem Tile auf dem Board
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].id === originalTile.id) {
          return i;
        }
      }
      return null;
    },

    // Neue Methode: Entferne alle Tiles vom Board (außer Regenbögen)
    removeAllTilesFromBoard() {
      const allTileIndices = [];
      
      // Sammle alle Tile-Indizes (außer Regenbögen)
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type !== 'rainbow') {
          allTileIndices.push(i);
        }
      }
      
      if (allTileIndices.length > 0) {
        // Zeige Regenbogen-Effekt-Animation in der Mitte des Boards
        const centerIndex = Math.floor(this.board.length / 2);
        this.showRainbowEffectAnimation(centerIndex);
        
        // Entferne alle Tiles (außer Regenbögen)
        allTileIndices.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation
        this.startFallAnimation(allTileIndices);
        
        // Punkte hinzufügen
        const points = allTileIndices.length * 30 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
      }
    },
    
    // Neue Methode: Überprüfe das Brett nach dem Feldaufbau auf Matches
    async checkBoardAfterSetup() {
      console.log('🔍 Überprüfe das Brett nach dem Feldaufbau auf Matches...');
      
      // Warte kurz, damit alle Tiles vollständig angezeigt werden
      await this.wait(500);
      
      // Prüfe auf Matches auf dem aktuellen Board
      const matchesAfterSetup = this.findMatchesOnBoard(this.board, false);
      
      if (matchesAfterSetup.length > 0) {
        console.log(`🔍 ${matchesAfterSetup.length} Match(es) nach dem Feldaufbau gefunden - starte automatische Behandlung`);
        
        // Behandle die gefundenen Matches automatisch (kein Spieler-Move)
        await this.handleMatches(matchesAfterSetup, false);
        
        console.log('✅ Brett nach dem Feldaufbau erfolgreich bereinigt');
      } else {
        console.log('✅ Keine Matches nach dem Feldaufbau gefunden - Brett ist bereit');
      }
    },
    
    // Neue Methode: Entferne ALLE Tiles vom Board (einschließlich Regenbögen)
    async removeAllTilesFromBoardIncludingRainbows() {
      const allTileIndices = [];
      
      // Sammle alle Tile-Indizes (einschließlich Regenbögen)
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i]) {
          allTileIndices.push(i);
        }
      }
      
      if (allTileIndices.length > 0) {
        console.log(`🌈 Entferne alle ${allTileIndices.length} Tiles vom Board (einschließlich Regenbögen)`);
        
        // Zeige Regenbogen-Effekt-Animation in der Mitte des Boards
        const centerIndex = Math.floor(this.board.length / 2);
        await this.showRainbowEffectAnimation(centerIndex);
        
        // Starte Schrumpf-Animation für alle Tiles
        await this.animateTileRemoval(allTileIndices);
        
        // Entferne alle Tiles (einschließlich Regenbögen)
        allTileIndices.forEach(index => {
          this.board[index] = null;
        });
        
        // Aktualisiere die Anzeige
        this.$forceUpdate();
        
        // Führe Fall-Down-Logik aus
        await this.fallTilesDown();
        
        // Fülle leere Positionen mit neuen Tiles auf
        await this.fillEmptyPositions();
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Punkte hinzufügen (höhere Punktzahl für diese spezielle Kombination)
        const points = allTileIndices.length * 50 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        console.log(`🌈 Alle Tiles erfolgreich entfernt! +${points} Punkte`);
        
        // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
        if (!this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach Regenbogen-Tausch: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Prüfe Level-Objekte nach dem Regenbogen-Tausch
        if (!this.isInitializingLevel) {
          console.log('🎯 Prüfe Level-Objekte nach Regenbogen-Tausch...');
          this.checkLevelObjectives();
        }
      }
    },

    // Neue Methode: Explodiere Bombe mit bestimmter Reichweite
    explodeBomb(centerIndex, rings, isManualActivation = false) {
      const { row: centerRow, col: centerCol } = this.indexToCoords(centerIndex);
      const tilesToRemove = [];
      const powerUpsToTrigger = []; // Sammle Power-Ups für Kettenreaktionen
      
      // Sammle alle Tiles in den angegebenen Ringen (außer Regenbögen)
      for (let ring = 0; ring <= rings; ring++) {
        for (let r = centerRow - ring; r <= centerRow + ring; r++) {
          for (let c = centerCol - ring; c <= centerCol + ring; c++) {
            if (r >= 0 && r < this.boardHeight && c >= 0 && c < this.boardWidth) {
              const index = this.coordsToIndex(r, c);
              if (index !== null && this.board[index] && this.board[index].type !== 'rainbow') {
                tilesToRemove.push(index);
                
                // Prüfe auf Power-Ups für Kettenreaktionen (außer Regenbögen)
                if (this.isPowerUpTile(this.board[index]) && this.board[index].type !== 'rainbow') {
                  powerUpsToTrigger.push({
                    index: index,
                    type: this.board[index].type
                  });
                }
              }
            }
          }
        }
      }
      
      if (tilesToRemove.length > 0) {
        // Spiele Bomb-Sound
        this.playSound('bomb');
        
        // Zeige Explosions-Animation
        this.showExplosionAnimation(centerIndex);
        
        // WICHTIG: Entferne zuerst nur normale Tiles, nicht Power-Ups
        const normalTilesToRemove = tilesToRemove.filter(index => 
          !this.isPowerUpTile(this.board[index]) || this.board[index].type === 'rainbow'
        );
        
        normalTilesToRemove.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation nur für normale Tiles
        this.startFallAnimation(normalTilesToRemove);
        
        // Punkte hinzufügen
        const points = normalTilesToRemove.length * 25 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte (nur bei manueller Aktivierung)
        if (isManualActivation && !this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach Bomben-Explosion: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Löse Kettenreaktionen nur für Power-Ups aus, die noch existieren
        // UND nur wenn es sich um eine manuelle Aktivierung handelt
        if (powerUpsToTrigger.length > 0 && isManualActivation) {
          setTimeout(() => {
            // Prüfe nochmal, ob die Power-Ups noch existieren, bevor sie ausgelöst werden
            const validPowerUps = powerUpsToTrigger.filter(powerUp => 
              this.board[powerUp.index] && 
              this.board[powerUp.index].type === powerUp.type
            );
            
            if (validPowerUps.length > 0) {
              this.triggerChainReaction(validPowerUps);
            }
          }, 800);
        }
      }
    },

    // Neue Methode: Löse Kettenreaktionen für Power-Ups aus
    triggerChainReaction(powerUps) {
      powerUps.forEach(powerUp => {
        if (powerUp.type === 'bomb') {
          // Bombe explodiert mit 1 Ring (3x3 Bereich)
          this.explodeBomb(powerUp.index, 1, true);
        } else if (powerUp.type === 'rocket') {
          // Rakete startet auf zufälliges Feld
          this.launchRocketToRandomField(powerUp.index);
        }
        // Regenbögen lösen keine Kettenreaktionen aus
        
        // WICHTIG: Entferne das Power-Up nach der Auslösung
        setTimeout(() => {
          this.safeRemoveTile(powerUp.index);
        }, 500);
      });
    },

    // Neue Methode: Erstelle zufällige Bomben auf 20% der Tiles
    createRandomBombs(percentage = 20) {
      const totalTiles = this.board.filter(tile => tile !== null).length;
      const bombCount = Math.floor(totalTiles * percentage / 100);
      const bombIndices = [];
      
      // Sammle alle verfügbaren Tile-Indizes (außer Bomben und Regenbögen)
      const availableIndices = [];
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type !== 'bomb' && this.board[i].type !== 'rainbow') {
          availableIndices.push(i);
        }
      }
      
      // Wähle zufällige Tiles aus und verwandle sie in Bomben
      for (let i = 0; i < Math.min(bombCount, availableIndices.length); i++) {
        const randomIndex = Math.floor(Math.random() * availableIndices.length);
        const tileIndex = availableIndices.splice(randomIndex, 1)[0];
        
        // Verwandle das Tile in eine Bombe
        this.board[tileIndex] = {
          type: 'bomb',
          id: Date.now() + tileIndex + Math.random(),
          row: this.indexToCoords(tileIndex).row,
          col: this.indexToCoords(tileIndex).col,
          isSpecial: true,
          specialType: 'bomb'
        };
        
                bombIndices.push(tileIndex);
      }
      
      
      return bombIndices;
    },

    // Neue Methode: Löse alle Bomben auf dem Feld aus
    detonateAllBombs() {
      const bombIndices = [];
      
      // Sammle alle Bomben-Indizes
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type === 'bomb') {
          bombIndices.push(i);
        }
      }
      
      // Löse alle Bomben aus
      bombIndices.forEach(index => {
                  this.explodeBomb(index, 1, true);
      });
      
      // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
      if (!this.isInitializingLevel && bombIndices.length > 0) {
        this.matchesMade += 1;
        console.log(`🎯 Match-Zähler erhöht nach Massen-Bomben-Explosion: ${this.matchesMade} Matches gemacht`);
      }
      
      // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
      // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
    },

    // Neue Methode: Erstelle zufällige Raketen
    createRandomRockets(percentage = 10) {
      const totalTiles = this.board.filter(tile => tile !== null).length;
      const rocketCount = Math.floor(totalTiles * percentage / 100);
      const availableIndices = [];
      
      // Sammle alle verfügbaren Positionen (keine Power-Ups, aber explizit keine Regenbögen)
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && !this.isPowerUpTile(this.board[i]) && this.board[i].type !== 'rainbow') {
          availableIndices.push(i);
        }
      }
      
      // Wähle zufällige Positionen für Raketen
      for (let i = 0; i < Math.min(rocketCount, availableIndices.length); i++) {
        const randomIndex = Math.floor(Math.random() * availableIndices.length);
        const boardIndex = availableIndices.splice(randomIndex, 1)[0];
        
        // Ersetze das Tile durch eine Rakete
        this.board[boardIndex] = {
          id: Math.random().toString(36).substr(2, 9),
          type: 'rocket',
          isSpecial: true
        };
      }
      
      
    },

    // Neue Methode: Starte alle Raketen
    launchAllRockets() {
      const rocketIndices = [];
      
      // Finde alle Raketen auf dem Board
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i] && this.board[i].type === 'rocket') {
          rocketIndices.push(i);
        }
      }
      
      // Starte jede Rakete
      rocketIndices.forEach(rocketIndex => {
        this.handleRocketDoubleClick(rocketIndex);
      });
      
      // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
      if (!this.isInitializingLevel && rocketIndices.length > 0) {
        this.matchesMade += 1;
        console.log(`🎯 Match-Zähler erhöht nach Massen-Raketen-Start: ${this.matchesMade} Matches gemacht`);
      }
      
      // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
      // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
    },

    // Neue Methode: Behandle Rakete + Bombe Kombination
    handleRocketBombCombination(originalTile1, originalTile2) {
      // Finde die Position einer der Power-Ups (für die 4 Nachbarfelder)
      const rocketTile = originalTile1.type === 'rocket' ? originalTile1 : originalTile2;
      const bombTile = originalTile1.type === 'bomb' ? originalTile1 : originalTile2;
      
      // Finde die Position auf dem Board
      const rocketIndex = this.findTileIndex(rocketTile);
      if (rocketIndex !== null) {
        // Lösche die 4 Nachbarfelder der Rakete
        const { row: rocketRow, col: rocketCol } = this.indexToCoords(rocketIndex);
        const tilesToRemove = [];
        
        // Sammle die 4 Nachbarfelder (oben, unten, links, rechts)
        const directions = [
          { row: rocketRow - 1, col: rocketCol }, // Oben
          { row: rocketRow + 1, col: rocketCol }, // Unten
          { row: rocketRow, col: rocketCol - 1 }, // Links
          { row: rocketRow, col: rocketCol + 1 }  // Rechts
        ];
        
        directions.forEach(({ row, col }) => {
          if (row >= 0 && row < this.boardHeight && col >= 0 && col < this.boardWidth) {
            const index = this.coordsToIndex(row, col);
            if (this.board[index]) {
              tilesToRemove.push(index);
            }
          }
        });
        
        // Entferne die Nachbarfelder (außer Regenbögen)
        if (tilesToRemove.length > 0) {
          tilesToRemove.forEach(index => {
            this.safeRemoveTile(index);
          });
          
          // Starte Fall-Animation
          this.startFallAnimation(tilesToRemove);
          
          // Punkte hinzufügen
          const points = tilesToRemove.length * 25 * this.currentLevel;
          this.levelScore += points;
          this.score += points;
          
          // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
          if (!this.isInitializingLevel) {
            this.matchesMade += 1;
            console.log(`🎯 Match-Zähler erhöht nach Raketen-Bomben-Kombination: ${this.matchesMade} Matches gemacht`);
          }
          
          // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
          // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        }
      }
      
      // Starte die Bomben-Rakete nach kurzer Verzögerung
      setTimeout(() => {
        this.launchBombRocket();
      }, 200);
      
      
    },

    // Neue Methode: Starte eine Bomben-Rakete
    launchBombRocket() {
      // Finde alle verfügbaren Positionen für die Landung
      const availableIndices = [];
      for (let i = 0; i < this.board.length; i++) {
        if (this.board[i]) {
          availableIndices.push(i);
        }
      }
      
      if (availableIndices.length > 0) {
        // Wähle zufällige Landungsposition
        const randomIndex = Math.floor(Math.random() * availableIndices.length);
        const landingIndex = availableIndices[randomIndex];
        
        // Explodiere am Landungsort (9 Felder = 1 Ring)
                  this.explodeBomb(landingIndex, 1, true);
        
        // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
        if (!this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach Bomben-Raketen-Landung: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
      }
    },

    // Neue Methode: Zeige Explosions-Animation
    showExplosionAnimation(centerIndex) {
      // Warte bis das DOM gerendert ist
      this.$nextTick(() => {
        const tileElement = document.querySelector(`[data-index="${centerIndex}"]`);
        const gameBoard = document.querySelector('.game-board-container');
        
        if (tileElement && gameBoard) {
          const tileRect = tileElement.getBoundingClientRect();
          const boardRect = gameBoard.getBoundingClientRect();
          
          // Berechne relative Position zum Game-Board-Container
          this.explosionPosition = {
            x: tileRect.left - boardRect.left + tileRect.width / 2 - 40,
            y: tileRect.top - boardRect.top + tileRect.height / 2 - 40
          };
          
          this.showExplosion = true;
          
          // Verstecke Animation nach der Dauer
          setTimeout(() => {
            this.showExplosion = false;
          }, 800);
        }
      });
    },

    // Neue Methode: Zeige Raketen-Flug-Animation
    showRocketFlightAnimation(startIndex, endIndex) {
      // Warte bis das DOM gerendert ist
      this.$nextTick(() => {
        const startElement = document.querySelector(`[data-index="${startIndex}"]`);
        const endElement = document.querySelector(`[data-index="${endIndex}"]`);
        const gameBoard = document.querySelector('.game-board-container');
        
        if (startElement && endElement && gameBoard) {
          const startRect = startElement.getBoundingClientRect();
          const endRect = endElement.getBoundingClientRect();
          const boardRect = gameBoard.getBoundingClientRect();
          
          this.rocketStartPos = {
            x: startRect.left - boardRect.left + startRect.width / 2 - 20,
            y: startRect.top - boardRect.top + startRect.height / 2 - 20
          };
          
          this.rocketEndPos = {
            x: endRect.left - boardRect.left + endRect.width / 2 - 20,
            y: endRect.top - boardRect.top + endRect.height / 2 - 20
          };
          
          this.showRocketFlight = true;
          
          // Verstecke Animation nach der Dauer
          setTimeout(() => {
            this.showRocketFlight = false;
          }, 1200);
        }
      });
    },

    // Neue Methode: Zeige Regenbogen-Effekt-Animation
    showRainbowEffectAnimation(centerIndex) {
      // Warte bis das DOM gerendert ist
      this.$nextTick(() => {
        const tileElement = document.querySelector(`[data-index="${centerIndex}"]`);
        const gameBoard = document.querySelector('.game-board-container');
        
        if (tileElement && gameBoard) {
          const tileRect = tileElement.getBoundingClientRect();
          const boardRect = gameBoard.getBoundingClientRect();
          
          this.rainbowCenter = {
            x: tileRect.left - boardRect.left + tileRect.width / 2 - 50,
            y: tileRect.top - boardRect.top + tileRect.height / 2 - 50
          };
          
          this.showRainbowEffect = true;
          
          // Verstecke Animation nach der Dauer
          setTimeout(() => {
            this.showRainbowEffect = false;
          }, 1500);
        }
      });
    },

    // Neue Methode: Zeige Bomben-Effekt-Animation
    showBombEffectAnimation(centerIndex) {
      // Warte bis das DOM gerendert ist
      this.$nextTick(() => {
        const tileElement = document.querySelector(`[data-index="${centerIndex}"]`);
        const gameBoard = document.querySelector('.game-board-container');
        
        if (tileElement && gameBoard) {
          const tileRect = tileElement.getBoundingClientRect();
          const boardRect = gameBoard.getBoundingClientRect();
          
          this.bombCenter = {
            x: tileRect.left - boardRect.left + tileRect.width / 2 - 30,
            y: tileRect.top - boardRect.top + tileRect.height / 2 - 30
          };
          
          this.showBombEffect = true;
          
          // Verstecke Animation nach der Dauer
          setTimeout(() => {
            this.showBombEffect = false;
          }, 300);
        }
      });
    },

    // Neue Methode: Zeige Regenbogen-Effekt-Animation
    showRainbowEffectAnimation(centerIndex) {
      // Warte bis das DOM gerendert ist
      this.$nextTick(() => {
        const tileElement = document.querySelector(`[data-index="${centerIndex}"]`);
        const gameBoard = document.querySelector('.game-board-container');
        
        if (tileElement && gameBoard) {
          const tileRect = tileElement.getBoundingClientRect();
          const boardRect = gameBoard.getBoundingClientRect();
          
          this.rainbowCenter = {
            x: tileRect.left - boardRect.left + tileRect.width / 2 - 30,
            y: tileRect.top - boardRect.top + tileRect.height / 2 - 30
          };
          
          this.showRainbowEffect = true;
          
          // Verstecke Animation nach der Dauer
          setTimeout(() => {
            this.showRainbowEffect = false;
          }, 500);
        }
      });
    },

    // Neue Methode: Behandle Doppelklick auf Rakete
    handleRocketDoubleClick(rocketIndex) {
      const { row: rocketRow, col: rocketCol } = this.indexToCoords(rocketIndex);
      const tilesToRemove = [];
      
      // Sammle die 4 Nachbarfelder (oben, unten, links, rechts)
      const directions = [
        { row: rocketRow - 1, col: rocketCol }, // Oben
        { row: rocketRow + 1, col: rocketCol }, // Unten
        { row: rocketRow, col: rocketCol - 1 }, // Links
        { row: rocketRow, col: rocketCol + 1 }  // Rechts
      ];
      
      directions.forEach(({ row, col }) => {
        if (row >= 0 && row < this.boardHeight && col >= 0 && col < this.boardWidth) {
          const index = this.coordsToIndex(row, col);
          if (index !== null && this.board[index]) {
            tilesToRemove.push(index);
          }
        }
      });
      
      if (tilesToRemove.length > 0) {
        // Spiele Rocket-Sound
        this.playSound('rocket');
        
        // Zeige Bomben-Effekt-Animation für die Rakete
        this.showBombEffectAnimation(rocketIndex);
        
        // Entferne die Nachbar-Tiles (außer Regenbögen)
        tilesToRemove.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation
        this.startFallAnimation(tilesToRemove);
        
        // Punkte hinzufügen
        const points = tilesToRemove.length * 15 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Starte Rakete auf zufälliges Feld
        this.launchRocketToRandomField(rocketIndex);
      }
    },

    // Neue Methode: Rakete auf zufälliges Feld starten
    launchRocketToRandomField(rocketIndex) {
      // Finde alle verfügbaren Felder (außer der Rakete selbst)
      const availableFields = [];
      for (let i = 0; i < this.board.length; i++) {
        if (i !== rocketIndex && this.board[i] && this.isValidPosition(this.indexToCoords(i).row, this.indexToCoords(i).col)) {
          availableFields.push(i);
        }
      }
      
      if (availableFields.length > 0) {
        // Wähle ein zufälliges Feld aus
        const randomIndex = availableFields[Math.floor(Math.random() * availableFields.length)];
        
        // Zeige visuellen Effekt auf dem Ziel-Tile (kurzer Farbwechsel)
        this.showRocketTargetEffect(randomIndex);
        
        // Kurze Verzögerung, damit der Effekt sichtbar ist
        setTimeout(() => {
          // Spiele Rocket-Sound
          this.playSound('rocket');
          
          // Prüfe ob das Ziel-Feld ein Power-Up ist (außer Regenbogen)
          const targetTile = this.board[randomIndex];
          let chainReaction = false;
          
          if (targetTile && this.isPowerUpTile(targetTile) && targetTile.type !== 'rainbow') {
            // Kettenreaktion auslösen
            chainReaction = true;
            setTimeout(() => {
              // Prüfe nochmal, ob das Power-Up noch existiert, bevor es ausgelöst wird
              if (this.board[randomIndex] && this.board[randomIndex].type === targetTile.type) {
                this.triggerChainReaction([{
                  index: randomIndex,
                  type: targetTile.type
                }]);
              }
            }, 500);
            
            // WICHTIG: Entferne das Ziel-Feld erst nach der Kettenreaktion
            setTimeout(() => {
              this.safeRemoveTile(randomIndex);
              // Starte Fall-Animation für das Ziel-Feld
              this.startFallAnimation([randomIndex]);
            }, 1000); // Längere Verzögerung für Kettenreaktion
          } else {
            // Keine Kettenreaktion - lösche das Feld sofort
            this.safeRemoveTile(randomIndex);
            // Starte Fall-Animation für das Ziel-Feld
            this.startFallAnimation([randomIndex]);
          }
          
          // Entferne die Rakete vom ursprünglichen Feld (außer Regenbögen)
          this.safeRemoveTile(rocketIndex);
          
          // Zeige Raketen-Flug-Animation
          this.showRocketFlightAnimation(rocketIndex, randomIndex);
          
          // Starte Fall-Animation für die Rakete
          this.startFallAnimation([rocketIndex]);
        }, 800); // 800ms Verzögerung für den visuellen Effekt
        
        // Punkte hinzufügen
        const points = 20 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
      }
    },

    // Neue Methode: Zeige visuellen Effekt auf dem Raketen-Ziel
    showRocketTargetEffect(targetIndex) {
      const targetTile = document.querySelector(`[data-index="${targetIndex}"]`);
      if (targetTile) {
        // Füge eine CSS-Klasse für den Raketen-Treffer-Effekt hinzu
        targetTile.classList.add('rocket-target-hit');
        
        // Entferne die Klasse nach der Animation
        setTimeout(() => {
          targetTile.classList.remove('rocket-target-hit');
        }, 300);
      }
    },

    // Neue Methode: Behandle Verbindung zweier Raketen
    handleRocketConnection(rocket1, rocket2) {
      const rocket1Index = this.findTileIndex(rocket1);
      const rocket2Index = this.findTileIndex(rocket2);
      
      if (rocket1Index === null || rocket2Index === null) return;
      
      const tilesToRemove = [];
      
      // Sammle Nachbarfelder beider Raketen
      [rocket1Index, rocket2Index].forEach(rocketIndex => {
        const { row: rocketRow, col: rocketCol } = this.indexToCoords(rocketIndex);
        
        const directions = [
          { row: rocketRow - 1, col: rocketCol }, // Oben
          { row: rocketRow + 1, col: rocketCol }, // Unten
          { row: rocketRow, col: rocketCol - 1 }, // Links
          { row: rocketRow, col: rocketCol + 1 }  // Rechts
        ];
        
        directions.forEach(({ row, col }) => {
          if (row >= 0 && row < this.boardHeight && col >= 0 && col < this.boardWidth) {
            const index = this.coordsToIndex(row, col);
            if (index !== null && this.board[index]) {
              tilesToRemove.push(index);
            }
          }
        });
      });
      
      if (tilesToRemove.length > 0) {
        // Spiele Rocket-Sound
        this.playSound('rocket');
        
        // Entferne die Nachbar-Tiles (außer Regenbögen)
        tilesToRemove.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation
        this.startFallAnimation(tilesToRemove);
        
        // Punkte hinzufügen
        const points = tilesToRemove.length * 20 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
        if (!this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach Raketen-Verbindung: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Starte 3 Raketen auf zufällige Felder
        this.launchThreeRockets([rocket1Index, rocket2Index]);
      }
    },

    // Neue Methode: Starte 3 Raketen auf zufällige Felder
    launchThreeRockets(rocketIndices) {
      // Entferne die ursprünglichen Raketen (außer Regenbögen)
      rocketIndices.forEach(index => {
        this.safeRemoveTile(index);
      });
      
      // Finde alle verfügbaren Felder
      const availableFields = [];
      for (let i = 0; i < this.board.length; i++) {
        if (!rocketIndices.includes(i) && this.board[i] && this.isValidPosition(this.indexToCoords(i).row, this.indexToCoords(i).col)) {
          availableFields.push(i);
        }
      }
      
      if (availableFields.length > 0) {
        // Wähle 3 zufällige Felder aus
        const selectedFields = [];
        for (let i = 0; i < Math.min(3, availableFields.length); i++) {
          const randomIndex = Math.floor(Math.random() * availableFields.length);
          const fieldIndex = availableFields.splice(randomIndex, 1)[0];
          selectedFields.push(fieldIndex);
        }
        
        // Prüfe auf Power-Ups für Kettenreaktionen (außer Regenbögen)
        const powerUpsToTrigger = [];
        const normalFieldsToRemove = [];
        
        selectedFields.forEach(index => {
          const tile = this.board[index];
          if (tile && this.isPowerUpTile(tile) && tile.type !== 'rainbow') {
            powerUpsToTrigger.push({
              index: index,
              type: tile.type
            });
          } else {
            normalFieldsToRemove.push(index);
          }
        });
        
        // Lösche nur normale Felder sofort
        normalFieldsToRemove.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation für normale Felder und Raketen
        this.startFallAnimation([...rocketIndices, ...normalFieldsToRemove]);
        
        // Punkte hinzufügen
        const points = (rocketIndices.length + normalFieldsToRemove.length) * 25 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
        if (!this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach 3-Raketen-Start: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Löse Kettenreaktionen nur für Power-Ups aus, die noch existieren
        if (powerUpsToTrigger.length > 0) {
          setTimeout(() => {
            // Prüfe nochmal, ob die Power-Ups noch existieren, bevor sie ausgelöst werden
            const validPowerUps = powerUpsToTrigger.filter(powerUp => 
              this.board[powerUp.index] && 
              this.board[powerUp.index].type === powerUp.type
            );
            
            if (validPowerUps.length > 0) {
              this.triggerChainReaction(validPowerUps);
            }
          }, 800);
        }
        
        
      }
    },

    // Neue Methode: Rakete mit normalem Tile tauschen
    handleRocketLaunch(rocketTile, targetTile) {
      const targetIndex = this.findTileIndex(targetTile);
      if (targetIndex === null) return;
      
      const { row: targetRow, col: targetCol } = this.indexToCoords(targetIndex);
      const tilesToRemove = [];
      
      // Sammle die 4 Nachbarfelder des Ziel-Tiles
      const directions = [
        { row: targetRow - 1, col: targetCol }, // Oben
        { row: targetRow + 1, col: targetCol }, // Unten
        { row: targetRow, col: targetCol - 1 }, // Links
        { row: targetRow, col: targetCol + 1 }  // Rechts
      ];
      
      directions.forEach(({ row, col }) => {
        if (row >= 0 && row < this.boardHeight && col >= 0 && col < this.boardWidth) {
          const index = this.coordsToIndex(row, col);
          if (index !== null && this.board[index]) {
            tilesToRemove.push(index);
          }
        }
      });
      
      if (tilesToRemove.length > 0) {
        // Spiele Rocket-Sound
        this.playSound('rocket');
        
        // Prüfe auf Power-Ups für Kettenreaktionen (außer Regenbögen)
        const powerUpsToTrigger = [];
        const normalTilesToRemove = [];
        
        tilesToRemove.forEach(index => {
          const tile = this.board[index];
          if (tile && this.isPowerUpTile(tile) && tile.type !== 'rainbow') {
            powerUpsToTrigger.push({
              index: index,
              type: tile.type
            });
          } else {
            normalTilesToRemove.push(index);
          }
        });
        
        // Entferne nur normale Tiles sofort
        normalTilesToRemove.forEach(index => {
          this.safeRemoveTile(index);
        });
        
        // Starte Fall-Animation für normale Tiles
        this.startFallAnimation(normalTilesToRemove);
        
        // Punkte hinzufügen
        const points = normalTilesToRemove.length * 15 * this.currentLevel;
        this.levelScore += points;
        this.score += points;
        
        // WICHTIG: Erhöhe den Match-Zähler für Level-Objekte
        if (!this.isInitializingLevel) {
          this.matchesMade += 1;
          console.log(`🎯 Match-Zähler erhöht nach Raketen-Start: ${this.matchesMade} Matches gemacht`);
        }
        
        // WICHTIG: Zug-Zähler wird bereits in handleRainbowSwap erhöht, nicht hier nochmal!
        // this.countPowerUpMove(); // ENTFERNT - wird bereits in handleRainbowSwap aufgerufen
        
        // Löse Kettenreaktionen nur für Power-Ups aus, die noch existieren
        if (powerUpsToTrigger.length > 0) {
          setTimeout(() => {
            // Prüfe nochmal, ob die Power-Ups noch existieren, bevor sie ausgelöst werden
            const validPowerUps = powerUpsToTrigger.filter(powerUp => 
              this.board[powerUp.index] && 
              this.board[powerUp.index].type === powerUp.type
            );
            
            if (validPowerUps.length > 0) {
              this.triggerChainReaction(validPowerUps);
            }
          }, 800);
        }
        
        // Starte Rakete auf zufälliges Feld
        this.launchRocketToRandomField(targetIndex);
      }
    }
  },
  computed: {
    // Computed Eigenschaften für UI
    isStatsExpanded() {
      return this.statsExpanded;
    },
    toggleIcon() {
      return this.statsExpanded ? '▼' : '▶';
    },
    safeMovesLeft() {
      return this.movesLeft || 0;
    }
  }
}
</script>

<style scoped>
/* Minimalistischer Style - nur für Match3Game */
/* Verwendet globale Scroll-Klassen: .contenthidden und .contentscroll */

.game-title {
  text-align: center;
  margin-bottom: 30px;
  padding-top: 20px;
}

.game-title h1 {
  margin: 0 0 10px 0;
  font-size: 2rem;
  font-weight: 600;
  color: #333;
}

.game-title p {
  margin: 0;
  font-size: 1.1rem;
  color: #666;
  line-height: 1.5;
}

/* Spiel-Layout */
.game-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  align-items: center;
}

.stats-section {
  width: 100%;
  max-width: 400px;
}

.game-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Verbleibende Züge Anzeige */
.moves-left-display {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.moves-left-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.moves-left-value {
  font-size: 24px;
  font-weight: bold;
  color: #FFC107;
}

/* Statistik-Bereich */
.stats-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-header {
  cursor: pointer;
  padding: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  user-select: none;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}

.stats-header:hover {
  background-color: #f8f9fa;
}

.stats-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.stats-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  pointer-events: none;
}

.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  margin: 0;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.toggle-button:hover {
  background-color: rgba(249, 162, 44, 0.1);
  transform: scale(1.1);
}

.toggle-icon {
  font-size: 18px;
  color: #F9A22C;
  transition: transform 0.3s ease;
  user-select: none;
  pointer-events: none;
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}

.stats-card.expanded .toggle-icon {
  transform: rotate(180deg);
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* Statistik-Werte Farben */
.score-value { color: #F9A22C; }
.moves-value { color: #28a745; }
.level-value { color: #17a2b8; }
.stars-value { color: #FFD700; }

/* Level-Info */
.level-info-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 600px;
}

.level-header {
  cursor: pointer;
  padding: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  user-select: none;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}

.level-header:hover {
  background-color: #f8f9fa;
}

.level-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.level-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex-grow: 1;
  text-align: left;
  pointer-events: none;
}

.level-content.expanded {
  display: block; /* Wenn expanded */
}

.level-info-card p {
  margin: 0 0 15px 0;
  text-align: left;
  color: #666;
  line-height: 1.6;
}

.level-objectives {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.objective-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.objective-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #28a745;
}

.objective-item.completed .objective-icon {
  color: #28a745;
}

.objective-progress {
  margin-left: auto;
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

/* Spiel-Brett */
.game-board-container {
  display: inline-block;
  padding: 20px;
  background: white;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  position: relative; /* Für absolute Positionierung der Animationen */
}

.game-board {
  display: grid;
  gap: 2px;
  padding: 10px;
  background: #f0f0f0;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative; /* Wichtig für absolute Positionierung der animierten Tiles */
}

.game-tile {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #eeeded, #f1eeee);
  border: 2px solid #c0c0c0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  user-select: none;
  position: relative;
}

/* Vergrößere den klickbaren Bereich für besseres Drag&Drop */
.game-tile::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}



.game-tile.empty {
  background: transparent;
  border: 2px solid transparent;
  box-shadow: none;
  pointer-events: none;
  /* Wichtig: Behalte die gleiche Größe wie normale Tiles */
  width: 30px;
  height: 30px;
  /* Optional: Zeige einen subtilen Rahmen für bessere Sichtbarkeit */
  background: rgba(0, 0, 0, 0.05);
}

.game-tile:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: #F9A22C;
}

.game-tile.swapping {
  animation: swap 0.8s ease-in-out;
}

.game-tile.matched {
  animation: match 1.2s ease-in-out;
}

/* Verschwind-Animation für matched Tiles */
.game-tile.disappearing {
  transition: all 0.8s ease-out;
  transform: scale(0.1) rotate(180deg);
  opacity: 0;
  z-index: 200;
}

/* Schrumpf-Animation für das Entfernen von Tiles */
.game-tile.removing {
  transition: all 0.75s ease-out;
  transform: scale(0.1) rotate(360deg);
  opacity: 0;
  z-index: 200;
}

/* Spezielle Items */
.game-tile.special-item-created {
  animation: specialItemCreated 2.5s ease-in-out;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

@keyframes specialItemCreated {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1); }
}

/* Fall-Animation */
.game-tile.falling {
  transition: transform 0.5s ease-in, opacity 0.3s ease-out;
  z-index: 100;
}

.game-tile.new-tile {
  transition: opacity 0.5s ease-in;
  z-index: 100;
}

/* Drag & Drop Styles */
.game-tile.dragging {
  transform: scale(1.1) !important;
  z-index: 200 !important;
  box-shadow: 0 8px 16px rgba(249, 162, 44, 0.6) !important;
  border-color: #F9A22C !important;
  cursor: grabbing !important;
  background: linear-gradient(135deg, #F9A22C, #e8941a) !important;
}

/* Preview Animation - Priorisiert transform über andere CSS-Regeln */
.game-tile.preview-animating {
  /* transform wird über JavaScript gesetzt */
  z-index: 999 !important;
}

.game-tile.drag-hover {
  transform: scale(1.05);
  border-color: #F9A22C;
  box-shadow: 0 4px 8px rgba(249, 162, 44, 0.4);
}

.game-tile.adjacent-available {
  transform: scale(1.02) !important;
  border-color: #4CAF50 !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: linear-gradient(135deg, #4CAF50, #45a049) !important;
}

.game-tile.adjacent-available:hover {
  transform: scale(1.05) !important;
  border-color: #45a049 !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5) !important;
  background: linear-gradient(135deg, #45a049, #388E3C) !important;
}

/* Drag-Effekt */
.drag-tile {
  background: white;
  border: 2px solid #F9A22C;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: rotate(5deg) scale(1.1);
  transition: transform 0.1s ease;
}

.drag-tile .tile-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.drag-tile .tile-icon {
  font-size: 18px;
  user-select: none;
}

.tile-icon {
  font-size: 18px;
  user-select: none;
}

/* Spiel-Kontrollen */
.game-controls {
  text-align: center;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: #F9A22C;
  color: #000;
}

.btn-primary:hover {
  background-color: #e8941a;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

/* Animationen */
@keyframes swap {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes match {
  0% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1); }
}

/* Power-Up Animationen */
@keyframes explosion {
  0% { 
    transform: scale(0.1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.5); 
    opacity: 0.8; 
  }
  100% { 
    transform: scale(2.5); 
    opacity: 0; 
  }
}

@keyframes rocketFlight {
  0% { 
    transform: translate(0, 0) rotate(0deg); 
    opacity: 1; 
  }
  50% { 
    transform: translate(var(--dx), var(--dy)) rotate(45deg); 
    opacity: 0.8; 
  }
  100% { 
    transform: translate(calc(var(--dx) * 2), calc(var(--dy) * 2)) rotate(90deg); 
    opacity: 0; 
  }
}

@keyframes rainbowPulse {
  0% { 
    transform: scale(1) rotate(0deg); 
    filter: hue-rotate(0deg); 
  }
  25% { 
    transform: scale(1.2) rotate(90deg); 
    filter: hue-rotate(90deg); 
  }
  50% { 
    transform: scale(1.4) rotate(180deg); 
    filter: hue-rotate(180deg); 
  }
  75% { 
    transform: scale(1.2) rotate(270deg); 
    filter: hue-rotate(270deg); 
  }
  100% { 
    transform: scale(1) rotate(360deg); 
    filter: hue-rotate(360deg); 
  }
}

@keyframes bombShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-1deg); }
  75% { transform: translateX(2px) rotate(1deg); }
}

@keyframes rocketTargetHit {
  0% { 
    background: linear-gradient(135deg, #eeeded, #f1eeee);
    transform: scale(1);
  }
  25% { 
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    transform: scale(1.1);
  }
  50% { 
    background: linear-gradient(135deg, #ffd93d, #ff6b6b);
    transform: scale(1.2);
  }
  75% { 
    background: linear-gradient(135deg, #ff8e53, #ffd93d);
    transform: scale(1.1);
  }
  100% { 
    background: linear-gradient(135deg, #eeeded, #f1eeee);
    transform: scale(1);
  }
}

/* Power-Up Animation Container */
.power-up-animation {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%); /* Zentriere die Animation */
}

/* Raketen-Treffer-Effekt */
.game-tile.rocket-target-hit {
  animation: rocketTargetHit 0.8s ease-in-out;
  z-index: 100;
}

.explosion-effect {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ff6b6b, #ff8e53, #ffd93d, #6bcf7f);
  border-radius: 50%;
  animation: explosion 2s ease-out forwards;
}

.rocket-flight {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #ff6b6b, #ffd93d);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: rocketFlight 3s ease-in-out forwards;
}

.rainbow-effect {
  width: 100px;
  height: 100px;
  background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #ff6b6b);
  border-radius: 50%;
  animation: rainbowPulse 3.5s ease-in-out forwards;
}

.bomb-effect {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #ff6b6b, #ff8e53);
  border-radius: 50%;
  animation: bombShake 0.8s ease-in-out infinite;
}

/* Loading State */
.game-board-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f5f5f5;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

.game-board-loading p {
  color: #666;
  font-size: 16px;
  margin: 0;
}



/* Fall-Animation für Tiles */
.game-tile.falling {
  z-index: 150;
  /* transform wird über JavaScript gesetzt */
}

/* Erscheinungs-Animation für neue Tiles */
.game-tile.new-tile {
  transition: all 0.5s ease-out;
  transform: scale(0.1);
  opacity: 0;
  animation: newTileAppear 0.5s ease-out forwards;
}

/* Raketen-Power-ups */
.game-tile.rocket-horizontal,
.game-tile.rocket-vertical {
  background: white !important;
  position: relative;
}

/* Raketen-Symbol */
.rocket-symbol {
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  font-weight: bold;
}

/* Bomben-Power-ups */
.game-tile.bomb {
  background: linear-gradient(45deg, #ff6b6b, #ff8e53) !important;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.8);
}

/* Bomben-Symbol */
.bomb-symbol {
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  font-weight: bold;
  animation: bombPulse 2s ease-in-out infinite;
}

@keyframes bombPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Regenbogen-Power-ups */
.game-tile.rainbow {
  background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4d9de0, #a855f7) !important;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
}

/* Regenbogen-Symbol */
.rainbow-symbol {
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  font-weight: bold;
  animation: rainbowGlow 3s ease-in-out infinite;
}

@keyframes rainbowGlow {
  0%, 100% {
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    filter: hue-rotate(180deg) brightness(1.2);
  }
}

/* Raketen-Explosions-Effekt */
.rocket-explosion {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ff6b6b, #ffd93d, #ff6b6b);
  border-radius: 50%;
  animation: rocketExplosion 1s ease-out forwards;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

@keyframes rocketExplosion {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Raketen-Flug-Animation */
.rocket-flight-animation {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
}

.rocket-flight {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  animation: rocketFlight 1s ease-in-out forwards;
}

@keyframes rocketFlight {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

/* Fliegende Rakete */
.flying-rocket {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  animation: rocketFly 1s ease-in-out forwards;
}

.rocket-icon {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
}

@keyframes rocketFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--fly-x), var(--fly-y)) scale(0.8);
    opacity: 0;
  }
}

@keyframes newTileAppear {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .game-layout {
    gap: 15px;
  }
  
  .stats-section {
    max-width: 100%;
  }
  
  .game-tile {
    width: 25px;
    height: 25px;
  }
  
  .game-board {
    padding: 12px;
    gap: 3px;
  }
  
  .tile-icon {
    font-size: 14px;
  }
  
  .moves-left-display {
    padding: 5px;
  }
  
  .moves-left-label {
    font-size: 14px;
  }
  
  .moves-left-value {
    font-size: 20px;
  }
}
</style>

