fix(plex): text over the picture sits on a dark panel

The player's loading, stall and error text was bare white or red on the video,
unreadable over a bright frame. It now sits on the dark panel the subtitle
notice and the track OSD already used, one constant for all three. DESIGN.md
records it and the slow-connection line.

frontend/src/modules/plex/PlexPlayer.tsx

@@ -118,6 +118,10 @@ const BACK_TO_PREV_S = 3;
 const PLAYER_MENU =
   "rounded-xl border border-white/15 bg-media-chrome/95 media-marks text-sm text-white shadow-2xl";
 const PLAYER_ROW = "block w-full rounded-lg px-2 py-1.5 text-left hover:bg-white/10";
+// Text over the picture (the loading/stall/error overlay, the subtitle notice, the track OSD) sits on
+// its own dark panel: bare white or red text was unreadable over a bright frame (measured live on a
+// white-lit scene). The shape (pill or panel) is each site's own.
+const OVER_VIDEO = "border border-white/15 bg-black/75 text-white shadow-2xl";
 // A track choice: white like the rest, the chosen one marked by the tick in the leading slot (DESIGN
 // "one of several"), which `media-marks` paints the media amber — a light theme's accent as the
 // label's colour was dark on the chrome (Slate 2.84:1), and the highlight's white washed it out.
@@ -1328,9 +1332,11 @@ export default function PlexPlayer({
           className="absolute inset-0 grid place-items-center px-6 text-center text-sm pointer-events-none"
         >
           {loadError ? (
-            <span className="max-w-md text-danger">{loadError}</span>
+            <div className={`max-w-md rounded-xl px-4 py-3 ${OVER_VIDEO}`}>
+              <span className="text-danger">{loadError}</span>
+            </div>
           ) : (
-            <div className="flex flex-col items-center gap-3 text-white/80">
+            <div className={`flex flex-col items-center gap-3 rounded-xl px-5 py-4 ${OVER_VIDEO}`}>
               <Loader2 className="w-10 h-10 animate-spin" aria-hidden />
               {/* Announce the stall to assistive tech. Initial load shows visible text; a mid-playback
                   rebuffer/seek (ready, no error) has no visible label, so give it an sr-only one via the
@@ -1338,7 +1344,7 @@ export default function PlexPlayer({
               {slowRates ? (
                 <>
                   <span>{t("plex.player.slowLink")}</span>
-                  <span className="text-xs text-white/60">
+                  <span className="text-xs text-white/70">
                     {t("plex.player.slowLinkRates", {
                       need: formatMbps(slowRates.need, i18n.language),
                       got: formatMbps(slowRates.got, i18n.language),
@@ -1369,7 +1375,9 @@ export default function PlexPlayer({
         aria-live="polite"
       >
         {selectedSub && subNotice && (
-          <div className="flex max-w-full items-center gap-2 truncate rounded-full border border-white/15 bg-black/75 px-4 py-2 text-sm text-white shadow-2xl">
+          <div
+            className={`flex max-w-full items-center gap-2 truncate rounded-full px-4 py-2 text-sm ${OVER_VIDEO}`}
+          >
             {subNotice !== "preparing" ? (
               <span className="text-danger">{t(`plex.player.subUnavailable.${subNotice}`)}</span>
             ) : (
@@ -1395,7 +1403,7 @@ export default function PlexPlayer({
         aria-live="polite"
       >
         {osd && (
-          <div className="max-w-full truncate rounded-full border border-white/15 bg-black/75 px-4 py-2 text-sm text-white shadow-2xl">
+          <div className={`max-w-full truncate rounded-full px-4 py-2 text-sm ${OVER_VIDEO}`}>
             {osd}
           </div>
         )}