Added refs

frontend/src/components/Bracket/MatchCard.tsx

@@ -3,6 +3,7 @@
 import { Check } from 'lucide-react';
 import { type MatchData } from '../../types';
 import { printName, stringToColor } from '../../utils/helpers';
+import WhistleIcon from "../../assets/whistle.svg?react"
 
 interface MatchCardProps {
     match: MatchData;
@@ -21,6 +22,8 @@ export default function MatchCard({ match, onClick }: MatchCardProps) {
         ? 'cursor-pointer hover:shadow-md hover:-translate-y-0.5'
         : 'cursor-default opacity-100';
 
+    const refName = match.ref_team?.name || match.ref_label;
+
     return (
         <div
             id={`match-${match.id}`}
@@ -43,7 +46,7 @@ export default function MatchCard({ match, onClick }: MatchCardProps) {
                 )}
             </div>
 
-            <div className="p-2 space-y-1.5">
+            <div className="p-2 space-y-1.5 flex-1 flex flex-col justify-center">
                 {[
                     { n: match.p1, s: match.p1_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p1_team_id, real: match.p1_is_real },
                     { n: match.p2, s: match.p2_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p2_team_id, real: match.p2_is_real }
@@ -66,6 +69,14 @@ export default function MatchCard({ match, onClick }: MatchCardProps) {
                     </div>
                 ))}
             </div>
+
+            {/* --- FLOATING REF BADGE --- */}
+            {refName && !isFinished && (
+                <div className="absolute -bottom-2.5 left-1/2 -translate-x-1/2 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 text-[8px] font-black uppercase tracking-widest px-2.5 py-0.5 rounded-full shadow-sm whitespace-nowrap z-20 flex items-center gap-1.5 print:hidden max-w-[90%]">
+                    <WhistleIcon className="text-orange-500 shrink-0" width={12} height={12} />
+                    <span className="truncate">{refName}</span>
+                </div>
+            )}
         </div>
     );
 }