From e9701ce25bf49c0ca05dc85d52d1f815fc4fb4e4 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Sat, 27 Jun 2026 16:22:43 -0500
Subject: [PATCH] KO: Stadion + Anstoss

---
 app/components/Bracket.tsx |  8 +++++---
 app/globals.css            | 10 +++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/components/Bracket.tsx b/app/components/Bracket.tsx
index 2f7f2ce..eb7562e 100644
--- a/app/components/Bracket.tsx
+++ b/app/components/Bracket.tsx
@@ -56,7 +56,7 @@ function fmtMatchInfo(utcDate?: string, stadiumId?: string): string {
   const city = stadiumId ? STADIUMS[stadiumId]?.city : "";
   const parts = [`${dateStr}`, `${timeStr}`];
   if (city) parts.push(city);
-  return parts.join(" · ");
+  return parts.join(" ");
 }
 
 function Tie({
@@ -69,8 +69,10 @@ function Tie({
 }) {
   return (
     <div className={`tie ${isFinal ? "final-tie" : ""}`}>
-      <div className="tie-head">Spiel {tie.matchNumber}</div>
-      {matchInfo && <div className="tie-meta">{matchInfo}</div>}
+      <div className="match-badge">{tie.matchNumber}</div>
+      <div className="tie-head">
+        {matchInfo || `Spiel ${tie.matchNumber}`}
+      </div>
       <Side s={tie.home} prob={tie.prob?.home} teams={teams} onShowTip={onShowTip} onHideTip={onHideTip} />
       <Side s={tie.away} prob={tie.prob?.away} teams={teams} onShowTip={onShowTip} onHideTip={onHideTip} />
     </div>
diff --git a/app/globals.css b/app/globals.css
index 2101cd2..06450c6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -223,10 +223,14 @@ table.standings { width: 100%; border-collapse: collapse; }
 .tie-head {
   font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint);
   letter-spacing: 0.04em; padding: 5px 10px 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.tie-meta {
-  font-family: var(--font-mono); font-size: 8px; color: var(--ink-dim);
-  padding: 2px 10px 0;
+.match-badge {
+  position: absolute; top: -6px; right: -6px;
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
+  line-height: 18px; min-width: 18px; text-align: center;
+  border-radius: 999px; padding: 0 4px;
+  background: var(--ink-faint); color: var(--bg-card);
 }
 .side {
   display: flex; align-items: center; justify-content: space-between;