style: remove hero border, LED time between flags like Design 2

- Removed visible blue border on hero card (now near-invisible white/6%)
- LED kickoff time moved between the two flags (replacing VS text)
- Layout: flag — LED time — flag centered vertically

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/DashboardPage.module.css

@@ -20,8 +20,7 @@
   background: rgba(49, 52, 66, 0.4);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  /* Gradient border effect */
+  border: 1px solid rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(75, 183, 248, 0.2);
   box-shadow:
     0 40px 80px -15px rgba(0, 0, 0, 0.6),
     0 8px 24px rgba(0, 0, 0, 0.3),
@@ -90,17 +89,19 @@
   50% { opacity: 0.3; }
 }
 
-/* LED Kickoff Time */
+/* Center column: LED time between flags */
-.heroKickoff {
+.heroCenter {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
   position: relative;
   z-index: 1;
-  margin-bottom: 8px;
 }
 
 .heroLED {
   font-family: 'DSEG7', 'Courier New', monospace;
-  font-size: 22px;
+  font-size: 24px;
   color: #FECC4C;
   letter-spacing: 0.04em;
   text-shadow:
@@ -109,6 +110,13 @@
     0 0 24px rgba(254, 174, 50, 0.25);
 }
 
+.heroGroup {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
 /* Teams */
 .heroTeams {
   display: flex;
@@ -173,13 +181,8 @@
   text-align: center;
 }
 
-.heroVs {
+/* VS is now replaced by heroCenter with LED time */
-  font-size: 1.1rem;
+.heroVs { display: none; }
-  font-weight: 800;
-  color: var(--gold);
-  margin-top: 24px;
-  text-shadow: 0 0 10px rgba(254, 174, 50, 0.3);
-}
 
 /* CTA / Tip */
 .heroTipBtn {

frontend/src/pages/DashboardPage.tsx

@@ -68,12 +68,7 @@ export default function DashboardPage(_props: Props) {
 
         {hero ? (
           <>
-            {/* LED Kickoff Time */}
+            {/* Teams with LED time in center */}
-            <div className={styles.heroKickoff}>
-              <span className={styles.heroLED}>{formatKickoff(hero.match.utcDate)}</span>
-            </div>
-
-            {/* Teams */}
             <div className={styles.heroTeams}>
               <div className={styles.heroTeam}>
                 <div className={styles.heroCrestBox}>
@@ -86,7 +81,10 @@ export default function DashboardPage(_props: Props) {
                 <span className={styles.heroTeamName}>{hero.match.homeTeam.shortName}</span>
               </div>
 
-              <span className={styles.heroVs}>VS</span>
+              {/* Center: LED time */}
+              <div className={styles.heroCenter}>
+                <span className={styles.heroLED}>{formatKickoff(hero.match.utcDate)}</span>
+              </div>
 
               <div className={styles.heroTeam}>
                 <div className={styles.heroCrestBox}>