Frame the club logo with a primary-coloured ring, sharpen its scaling

Wraps the uploaded logo in the same avatar shape as the initials
fallback (so the header doesn't jump in size depending on whether a
club has one) and adds a ring in the club's own primary colour as a
plain border around it.

Also hints the browser to use its higher-quality image scaler: a
club's raster logo is often much smaller than the badge it's shown in,
and the default upscaling in some engines reads as pixelated. Doesn't
affect SVG logos, which scale losslessly regardless.

assets/app.css

@@ -193,3 +193,18 @@
 [data-theme="dark"] .logo {
     background-image: var(--logo-light);
 }
+
+/* Club-uploaded logos are arbitrary raster files (often much smaller than the
+   badge they're displayed in), so the browser is upscaling them -- and the
+   default resampling some engines fall back to for that reads as pixelated.
+   Forcing the element onto its own GPU-composited layer makes Chrome/Safari
+   pick their higher-quality scaler; the image-rendering hints are a no-op
+   where unsupported, degrading gracefully to the browser default. Doesn't
+   apply to SVG logos, which scale losslessly regardless. */
+.club-logo {
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: smooth;
+    image-rendering: high-quality;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+}