:root {
    --primary: #6c5ce7;
    --secondary: #a29bfe;
    --accent: #00cec9;
    --dark: #2d3436;
    --danger: #e17055;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: linear-gradient(45deg, #2d3436, #636e72);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
}

h1 {
    text-align: center;
    color: var(--dark);
    margin-bottom: 15px;
    font-size: 2em;
    font-weight: 700;
    background: linear-gradient(45deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.control-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background: rgba(223, 230, 233, 0.6);
    border-radius: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.custom-select {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-select:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.color-input {
    width: 40px;
    height: 40px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.color-input:hover {
    transform: scale(1.1);
}

.tool-button {
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.tool-button:hover {
    transform: translateY(-2px);
    background: var(--secondary);
}

.tool-button.active {
    background: var(--accent);
    transform: scale(0.95);
}

.tool-button.danger {
    background: var(--danger);
}

.tool-button.danger:hover {
    background: #e55039;
}

.export-button {
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: white;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.export-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(45deg, var(--secondary), var(--primary));
}

.canvas-wrapper {
    padding: 15px;
    background: rgba(223, 230, 233, 0.6);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: auto;
}

.pixel-canvas {
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

class PixelArtGenerator {
    constructor() {
        this.canvas = document.getElementById('pixelCanvas');
        this.ctx = this.canvas.getContext('2d');
        this.gridSize = 16;
        this.pixelSize = 20;
        this.color = '#000000';
        this.isDrawing = false;
        this.isFilling = false;
        this.isErasing = false;

        this.init();
        this.bindEvents();
    }

    init() {
        this.adjustCanvasSize();
        this.clearCanvas();
    }

    adjustCanvasSize() {
        const maxWidth = 700; // Reduced for condensed design
        this.pixelSize = Math.floor(maxWidth / this.gridSize);
        this.canvas.width = this.gridSize * this.pixelSize;
        this.canvas.height = this.gridSize * this.pixelSize;
    }

    bindEvents() {
        document.getElementById('gridSize').addEventListener('change', (e) => {
            this.gridSize = parseInt(e.target.value);
            this.adjustCanvasSize();
            this.clearCanvas();
        });

        const colorPicker = document.getElementById('colorPicker');
        colorPicker.addEventListener('change', (e) => {
            this.color = e.target.value;
        });

        document.getElementById('fillTool').addEventListener('click', () => {
            this.isFilling = !this.isFilling;
            this.isErasing = false;
            this.toggleToolState('fillTool', this.isFilling);
        });

        document.getElementById('eraseTool').addEventListener('click', () => {
            this.isErasing = !this.isErasing;
            this.isFilling = false;
            this.toggleToolState('eraseTool', this.isErasing);
        });

        document.getElementById('clearBtn').addEventListener('click', () => {
            this.clearCanvas();
        });

        this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e));
        this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
        this.canvas.addEventListener('mouseup', () => this.isDrawing = false);

        document.getElementById('exportPNG').addEventListener('click', () => this.exportPNG());
    }

    toggleToolState(toolId, isActive) {
        const btn = document.getElementById(toolId);
        btn.classList.toggle('active', isActive);
    }

    getPixelCoordinates(e) {
        const rect = this.canvas.getBoundingClientRect();
        const x = Math.floor((e.clientX - rect.left) / this.pixelSize);
        const y = Math.floor((e.clientY - rect.top) / this.pixelSize);
        return { x, y };
    }

    drawPixel(x, y) {
        this.ctx.fillStyle = this.isErasing ? '#ffffff' : this.color;
        this.ctx.fillRect(x * this.pixelSize, y * this.pixelSize, this.pixelSize, this.pixelSize);
    }

    handleMouseDown(e) {
        this.isDrawing = true;
        const { x, y } = this.getPixelCoordinates(e);

        if (this.isFilling) {
            this.floodFill(x, y, this.ctx.getImageData(x * this.pixelSize, y * this.pixelSize, 1, 1).data);
        } else {
            this.drawPixel(x, y);
        }
    }

    handleMouseMove(e) {
        if (!this.isDrawing || this.isFilling) return;
        const { x, y } = this.getPixelCoordinates(e);
        this.drawPixel(x, y);
    }

    floodFill(x, y, targetColor) {
        const currentColor = this.ctx.getImageData(x * this.pixelSize, y * this.pixelSize, 1, 1).data;
        if (this.colorsMatch(currentColor, targetColor)) {
            this.drawPixel(x, y);
            if (x > 0) this.floodFill(x - 1, y, targetColor);
            if (x < this.gridSize - 1) this.floodFill(x + 1, y, targetColor);
            if (y > 0) this.floodFill(x, y - 1, targetColor);
            if (y < this.gridSize - 1) this.floodFill(x, y + 1, targetColor);
        }
    }

    colorsMatch(color1, color2) {
        return color1[0] === color2[0] && color1[1] === color2[1] && 
               color1[2] === color2[2] && color1[3] === color2[3];
    }

    clearCanvas() {
        this.ctx.fillStyle = '#ffffff';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }

    exportPNG() {
        const link = document.createElement('a');
        link.download = 'pixel-art.png';
        link.href = this.canvas.toDataURL('image/png');
        link.click();
    }
}

new PixelArtGenerator();