From 5138e61854aaed213a74e377a03020d8a80a68e3 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Sat, 4 Jul 2026 10:32:31 -0500
Subject: [PATCH] PSO Score

---
 app/[locale]/components/KoFixtures.tsx | 30 ++++++++++++++++++--------
 app/globals.css                        | 19 ++++++++++++++++
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/app/[locale]/components/KoFixtures.tsx b/app/[locale]/components/KoFixtures.tsx
index fabfd26..95fcb6b 100644
--- a/app/[locale]/components/KoFixtures.tsx
+++ b/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>
 
diff --git a/app/globals.css b/app/globals.css
index b33b2a5..8c00035 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -285,6 +285,9 @@ table.standings { width: 100%; border-collapse: collapse; }
 }
 .foot a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
 
+/* PSO-Badge: auf Desktop inline im Score, auf Mobile absolut darunter schwebend */
+.pso-badge { display: none; }
+
 /* =====================================================================
    MOBIL — Breakpoint 640px (iPhone ~375, Galaxy ~412, alle ≤640)
    ===================================================================== */
@@ -357,6 +360,22 @@ table.standings { width: 100%; border-collapse: collapse; }
   .bracket-banner { padding: 10px 12px; font-size: 13px; }
   .legend { font-size: 10px; gap: 12px; }
 
+  /* ---------- mobil: PSO-Badge (Elfmeterschießen unter dem Score) ---------- */
+  .pso-inline { display: none; }
+  .pso-badge {
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 2px;
+    font-size: 10px;
+    font-family: var(--font-mono);
+    color: var(--ink);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
   /* ---------- mobil: Simulation ---------- */
   .sim-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
   .sim-row-phase { min-width: 100%; font-size: 9px; }