KO: Stadion + Anstoss

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>

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;