PSO Score

app/[locale]/components/KoFixtures.tsx

@@ -16,13 +16,16 @@ function fmtTime(iso: string, locale: string): string {
   return d.toLocaleTimeString(locale === "en" ? "en-US" : "de-DE", { hour: "2-digit", minute: "2-digit" });
 }
 
-function scoreDisplay(m: Match, dict: Dictionary): string {
+function scoreMain(m: Match): string {
   if (m.status === "SCHEDULED" || m.status === "POSTPONED" || (m.homeScore == null && m.awayScore == null)) return "– : –";
-  const base = `${m.homeScore ?? 0} : ${m.awayScore ?? 0}`;
+  return `${m.homeScore ?? 0} : ${m.awayScore ?? 0}`;
+}
+
+function scorePenalty(m: Match, dict: Dictionary): string | null {
   if (m.homePenalty != null && m.awayPenalty != null) {
-    return `${base} (${m.homePenalty}:${m.awayPenalty} ${dict.bracket.penaltyShootout})`;
+    return `${m.homePenalty}:${m.awayPenalty} ${dict.bracket.penaltyShootout}`;
   }
-  return base;
+  return null;
 }
 
 function isLive(m: Match): boolean {
@@ -145,6 +148,7 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
               const city = STADIUMS[MATCH_STADIUMS[m.matchNumber]]?.city;
               const isTarget = String(m.id) === String(targetMatchId);
               const finished = m.status === "FINISHED";
+              const penalty = scorePenalty(m, dict);
 
               return (
                 <div
@@ -195,13 +199,21 @@ export default function KoFixtures({ teams, matches, dict, locale }: { teams: Te
                   {/* Teams + Score */}
                   <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                     <TeamLabel team={home} locale={locale} />
-                    <span style={{
-                      fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700,
-                      color: live ? "var(--turf)" : "var(--ink)",
+                    <div style={{
+                      position: "relative",
+                      display: "flex", flexDirection: "column", alignItems: "center",
                       padding: "0 16px",
                     }}>
-                      {scoreDisplay(m, dict)}
-                    </span>
+                      <span style={{
+                        fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700,
+                        color: live ? "var(--turf)" : "var(--ink)",
+                        lineHeight: 1,
+                      }}>
+                        {scoreMain(m)}
+                        {penalty && <span className="pso-inline"> ({penalty})</span>}
+                      </span>
+                      {penalty && <span className="pso-badge">{penalty}</span>}
+                    </div>
                     <TeamLabel team={away} reverse locale={locale} />
                   </div>