function resize() {
    // 1. INTERNE SPIEL-AUFLÖSUNG ERZWINGEN
    // Das behebt den "Zoom/Nur Ecke sichtbar" Fehler
    canvas.width = GAME_WIDTH;  // 800
    canvas.height = GAME_HEIGHT; // 400

    // 2. Verfügbaren Platz im Browser berechnen (Minus etwas Rand)
    const windowWidth = window.innerWidth - 20;
    const windowHeight = window.innerHeight - 20;

    const targetRatio = GAME_WIDTH / GAME_HEIGHT; // 2.0
    const windowRatio = windowWidth / windowHeight;

    let finalWidth, finalHeight;

    // 3. Letterboxing berechnen
    if (windowRatio < targetRatio) {
        // Screen ist schmaler (z.B. Handy Portrait) -> Breite limitiert
        finalWidth = windowWidth;
        finalHeight = windowWidth / targetRatio;
    } else {
        // Screen ist breiter (z.B. Desktop) -> Höhe limitiert
        finalHeight = windowHeight;
        finalWidth = finalHeight * targetRatio;
    }

    // 4. Größe auf den CONTAINER anwenden
    if (container) {
        container.style.width = `${Math.floor(finalWidth)}px`;
        container.style.height = `${Math.floor(finalHeight)}px`;
    }

    // Hinweis: Wir setzen KEINE style.width/height auf das Canvas Element selbst.
    // Das Canvas erbt "width: 100%; height: 100%" vom CSS und füllt den Container.
}

// Event Listener
window.addEventListener('resize', resize);

// Einmal sofort ausführen
resize();


// --- DRAWING ---

function drawGame() {
    // Alles löschen
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

    // Background
    if (bgSprite.complete && bgSprite.naturalHeight !== 0) {
        // Hintergrundbild exakt auf 800x400 skalieren
        ctx.drawImage(bgSprite, 0, 0, GAME_WIDTH, GAME_HEIGHT);
    } else {
        // Fallback Farbe
        ctx.fillStyle = "#f0f0f0";
        ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
    }

    // Boden
    ctx.fillStyle = "rgba(60, 60, 60, 0.8)";
    ctx.fillRect(0, GROUND_Y, GAME_WIDTH, 50);

    // Hindernisse
    obstacles.forEach(obs => {
        const img = sprites[obs.def.id];
        if (img) {
            ctx.drawImage(img, obs.x, obs.y, obs.def.width, obs.def.height);
        } else {
            ctx.fillStyle = obs.def.color;
            ctx.fillRect(obs.x, obs.y, obs.def.width, obs.def.height);
        }
        if(obs.speech) drawSpeechBubble(obs.x, obs.y, obs.speech);
    });

    // Debug Rahmen (Server Hitboxen)
    ctx.strokeStyle = isGameOver ? "red" : "lime";
    ctx.lineWidth = 2;
    serverObstacles.forEach(srvObs => {
        ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
    });

    // Spieler
    const drawY = isCrouching ? player.y + 25 : player.y;
    const drawH = isCrouching ? 25 : 50;

    if (playerSprite.complete && playerSprite.naturalHeight !== 0) {
        ctx.drawImage(playerSprite, player.x, drawY, player.w, drawH);
    } else {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, drawY, player.w, drawH);
    }

    // Game Over Overlay (Dunkelheit)
    if (isGameOver) {
        ctx.fillStyle = "rgba(0,0,0,0.7)";
        ctx.fillRect(0,0,GAME_WIDTH, GAME_HEIGHT);
    }
}

function drawSpeechBubble(x, y, text) {
    const bX = x-20; const bY = y-40; const bW = 120; const bH = 30;
    ctx.fillStyle="white"; ctx.fillRect(bX,bY,bW,bH);
    ctx.strokeRect(bX,bY,bW,bH);
    ctx.fillStyle="black"; ctx.font="10px Arial"; ctx.textAlign="center";
    ctx.fillText(text, bX+bW/2, bY+20);
}