feat(hero): display simultaneous group-final matches with shared timer

findFeaturedMatch → findFeaturedMatches: returns all matches sharing the
earliest kickoff, enabling the hero to show 2+ simultaneous group-final games
(same phase, shared time/countdown). renderHero splits single-match (unchanged
DOM) vs multi-match (stacked with dividers). heroMatchupHTML extracted for
reusable matchup layout.

CSS: .hero-matchups/match/divider/time for vertical stacking and shared time.
i18n: hero.nextMatches (EN/PT) for multi-match label.
This commit is contained in:
Lucas Kalil 2026-06-15 14:52:10 -03:00
parent 99ea02a604
commit 6e33142c96
5 changed files with 107 additions and 31 deletions

View file

@ -332,6 +332,32 @@ button {
font-size: 0.95rem;
}
/* two simultaneous matches (group-stage final round) stacked under one label */
.hero-matchups {
display: flex;
flex-direction: column;
gap: clamp(1rem, 3.5vw, 1.75rem);
}
.hero-match {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.hero-divider {
width: min(420px, 80%);
height: 1px;
margin: 0 auto;
background: var(--glass-border);
}
.hero-time {
margin-top: 0.25rem;
color: var(--text-primary);
font-weight: 600;
}
/* --------------------------------------------------------- countdown */
.countdown {