/* Mobile and Tablet Responsive Styles */
@media (max-width: 768px) {
    /* Navigation */
    .navbar {
        padding: var(--spacing-md) var(--spacing-lg);
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-links {
        gap: var(--spacing-sm);
    }

    /* Container */
    .container {
        padding: var(--spacing-lg);
    }

    /* Cards */
    .card {
        padding: var(--spacing-lg);
    }

    /* Puzzle Pieces */
    .puzzle-piece {
        width: 120px;
        height: 90px;
    }
}

    /* Theme Settings Mobile Adjustments */
    .api-key-group {
        flex-direction: column;
    }

    .api-key-group .btn {
        width: 100%;
    }

    .color-input-group {
        flex-wrap: wrap;
    }

    .color-input-group .text-input {
        width: 100%;
    }

    .palette-colors {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
    }

    .palette-color {
        padding: var(--spacing-xs);
    }

    .color-swatch {
        height: 50px;
    }

    .setting-item label {
        min-width: auto;
    }