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}`;
-  if (m.homePenalty != null && m.awayPenalty != null) {
-    return `${base} (${m.homePenalty}:${m.awayPenalty} ${dict.bracket.penaltyShootout})`;
 }
-  return base;
+
+function scorePenalty(m: Match, dict: Dictionary): string | null {
+  if (m.homePenalty != null && m.awayPenalty != null) {
+    return `${m.homePenalty}:${m.awayPenalty} ${dict.bracket.penaltyShootout}`;
+  }
+  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} />
+                    <div style={{
+                      position: "relative",
+                      display: "flex", flexDirection: "column", alignItems: "center",
+                      padding: "0 16px",
+                    }}>
                       <span style={{
                         fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700,
                         color: live ? "var(--turf)" : "var(--ink)",
-                      padding: "0 16px",
+                        lineHeight: 1,
                       }}>
-                      {scoreDisplay(m, dict)}
+                        {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>
 

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; }