Liquid Glass effect on the bottom navigation bar renders badly on mobile

[arnonrdp]

On mobile, the floating bottom navigation bar uses a "Liquid Glass" / glassmorphism effect. Over real content (the bookshelf with covers) the effect renders poorly: the refraction/blur heavily smears and distorts whatever is behind the bar, the book covers become unreadable, and the bar's edges/highlights look broken rather than like a clean frosted-glass surface.

Where it happens

• Logged-in mobile view, bottom navigation bar (feed / shelf / search / friends / notifications / settings).
• Most visible on the shelf/library page, where book covers sit directly behind the bar (e.g. the bottom row of covers gets warped and blurred).

Steps to reproduce

1. Open the app on a mobile device (or a narrow mobile viewport).
2. Log in and go to the shelf/library with several books.
3. Look at the bottom navigation bar overlapping the last row of covers.

Expected

A subtle, clean frosted-glass bar: light blur + slight transparency, with content behind it still recognizable and the bar's borders looking crisp.

Actual

Strong, distorted "liquid" refraction that smears the covers behind the bar, making them unreadable; the effect looks heavy and visually broken on mobile.

Likely cause / things to check

• backdrop-filter blur radius (and any custom refraction/SVG filter) is too strong on small screens — consider reducing the blur and the distortion amount at mobile breakpoints.
• Layered highlights/box-shadow on the bar may be exaggerating the effect at mobile DPR (2x/3x).
• Consider a @supports (backdrop-filter: blur()) fallback and a reduced-intensity variant for mobile.

Notes on screenshots

• Attached: a screenshot captured from a logged-in mobile-width browser session showing the bottom navigation bar.
• A real-device (iPhone) screenshot shows the problem more clearly: the Liquid Glass bar visibly distorts the book covers (e.g. the "Sherlock Holmes" covers) behind it. (To be added.)