From 44199b0a9081881f55b8fb48c0f0d622db901e1d Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 13:22:13 +0200
Subject: [PATCH] style: unified flag+time design across Dashboard and
 Spielplan
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dashboard:
- Flags aligned to top (flex-start) — consistent height regardless of name length
- LED time centered to flag height (64px)

Match Cards:
- Flags fullbleed (object-fit: cover), larger (56px), glassmorphism shine
- LED kickoff time replaces dash separator between flags
- Score appears at same position when Live/Finished
- Removed separate kickoffRow — cards are more compact
- scoreBox height matches flag height for vertical centering

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/MatchCard.module.css | 58 ++++++++------------
 frontend/src/components/MatchCard.tsx        | 13 +----
 frontend/src/pages/DashboardPage.module.css  |  9 +--
 3 files changed, 31 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index ef74645..593a84a 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -102,40 +102,25 @@
   border: 1px solid rgba(75,183,248,0.15);
 }
 
-/* Kickoff — stadium LED segment display */
-.kickoffRow {
-  text-align: center;
-  margin: 8px 0;
-}
-
+/* LED time between flags */
 .kickoffLED {
   font-family: 'DSEG7', 'Courier New', monospace;
-  font-size: 18px;
+  font-size: 16px;
   color: #FECC4C;
   letter-spacing: 0.02em;
-  word-spacing: -0.1em;
   text-shadow:
-    0 0 4px rgba(254, 174, 50, 0.9),
-    0 0 12px rgba(254, 174, 50, 0.6),
-    0 0 24px rgba(254, 174, 50, 0.3),
-    0 0 40px rgba(254, 174, 50, 0.15);
+    0 0 3px rgba(254, 174, 50, 0.9),
+    0 0 8px rgba(254, 174, 50, 0.5),
+    0 0 16px rgba(254, 174, 50, 0.25);
 }
 
-
-/* VS separator */
-.vsSeparator {
-  font-size: 24px;
-  font-weight: 800;
-  color: var(--text-muted);
-}
-
-/* Match row — Teams + Score */
+/* Match row — Teams + Score/Time */
 .matchRow {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  gap: 16px;
-  margin-bottom: 18px;
+  gap: 10px;
+  margin-bottom: 16px;
 }
 
 /* Teams — flag on top, name below */
@@ -148,23 +133,26 @@
   min-width: 0;
 }
 
-/* Score aligned to flag center (not flag+name center) */
+/* Center: Score or LED time, vertically centered to flag */
 .scoreBox {
   display: flex;
   align-items: center;
   justify-content: center;
   align-self: flex-start;
-  height: 52px; /* match flag height for vertical centering */
+  height: 56px; /* match flag height for vertical centering */
+  min-width: 60px;
 }
 
-/* Flag box — subtle, clean */
+/* Flag box — fullbleed icon style */
 .flagBox {
-  width: 52px;
-  height: 52px;
-  border-radius: 12px;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
   background: var(--surface-high);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-  border: 1px solid var(--border-subtle);
+  box-shadow:
+    0 4px 12px rgba(0,0,0,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.08);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -178,15 +166,15 @@
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 40%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
+  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
   pointer-events: none;
   z-index: 1;
 }
 
 .crest {
-  width: 36px;
-  height: 36px;
-  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   position: relative;
   z-index: 0;
 }
diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx
index 220e6da..811b838 100644
--- a/frontend/src/components/MatchCard.tsx
+++ b/frontend/src/components/MatchCard.tsx
@@ -116,14 +116,7 @@ export default function MatchCard({ match, onTip }: Props) {
         )}
       </div>
 
-      {/* Kickoff — stadium LED display, centered */}
-      {!isFinished && !isLive && (
-        <div className={styles.kickoffRow}>
-          <span className={styles.kickoffLED}>{formatKickoff(match.utcDate)}</span>
-        </div>
-      )}
-
-      {/* Teams + Score */}
+      {/* Teams + Center (time or score) */}
       <div className={styles.matchRow}>
         {/* Home */}
         <div className={styles.teamHome}>
@@ -131,14 +124,14 @@ export default function MatchCard({ match, onTip }: Props) {
           <span className={styles.teamName}>{match.homeTeam.shortName}</span>
         </div>
 
-        {/* Center: Score or VS separator */}
+        {/* Center: LED time or Score */}
         <div className={styles.scoreBox}>
           {isFinished || isLive ? (
             <span className={`${styles.score} ${isLive ? styles.scoreLive : ''}`}>
               {match.score.home ?? '–'}&nbsp;:&nbsp;{match.score.away ?? '–'}
             </span>
           ) : (
-            <span className={styles.vsSeparator}>–</span>
+            <span className={styles.kickoffLED}>{formatKickoff(match.utcDate)}</span>
           )}
         </div>
 
diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css
index f74da80..7b6209a 100644
--- a/frontend/src/pages/DashboardPage.module.css
+++ b/frontend/src/pages/DashboardPage.module.css
@@ -103,12 +103,13 @@
   50% { opacity: 0.3; }
 }
 
-/* Center column: LED time between flags */
+/* Center column: LED time between flags, vertically centered to flag height */
 .heroCenter {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  height: 64px; /* matches flag box height */
   position: relative;
   z-index: 1;
 }
@@ -152,8 +153,8 @@
 .heroTeams {
   display: flex;
   justify-content: center;
-  align-items: center;
-  gap: 12px;
+  align-items: flex-start;
+  gap: 8px;
   margin: 16px 0 20px;
   position: relative;
   z-index: 1;