.top-space {
    background-image: url(../img/bg-top.png);
    background-size: cover;
    background-position: top;
    margin: 0;
    width: 100%;
}

.space-white {
    display: flex;
    width: 1240px;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.joga-junto {
    font-size: 22px;
}

.games-carousel-bg {
    background: white;
    padding: 10px 0;
    margin-top: 50px;
}

.games-carousel.games-timeline {
    background: transparent !important; /* fundo vai no wrapper */
}

.games-carousel.games-timeline {
    display: grid !important;
    grid-template-columns: 42px 1fr 42px !important;
    align-items: stretch !important;
    padding: 30px 0px !important;
    background: white;
    border-radius: 5px;
}

.games-carousel.games-timeline .games-track{
  display:flex !important;
  gap:5px !important;              /* gap entre datas */
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 0 10px 1px !important;
  scroll-behavior:smooth !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  align-items:flex-start !important;
}
.games-carousel.games-timeline .games-track::-webkit-scrollbar{ display:none !important; }

.carousel-btn {
    border: 1px solid #95959559;
    border-radius: 5px;
    background-color: white;
    font-size: 55px;
    color: #320e60;
    cursor: pointer;
}

    .carousel-btn:hover {
        background-color: #f3f3f3;
        transition: .3s ease;
    }

/* Grupo de data */
.date-group{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

/* Linha vermelha + data */
.date-line {
    position: relative !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
}
.date-line::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  border-top:2px solid #e11d2f !important;
}
.date-label {
    position: relative !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    color: #111 !important;
    padding: 0 10px !important;
    background: linear-gradient(to right, #fff, #ffffff, #fff) !important;
}

/* Jogos dentro da data (TEM que ser flex senão empilha) */
.date-games{
  display:flex !important;
  gap:0px !important;
  flex-wrap:nowrap !important;
}

/* CARD v2 */
.game-card.game-card-v2 {
    min-width: 130px !important;
    max-width: 200px !important;
    border-radius: 10px !important;
    background: #f3f3f3 !important;
    border: 1px solid #cfd3d8 !important;
    padding: 6px 6px 8px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .06) !important;
    width: 300px !important;
    transition: .3s ease;
    height: 175px;
    margin: 5px;
}

.game-card.game-card-v2:hover {
    background: #e5e5e5 !important;
}

/* Cabeçalho (pílulas) */
.game-card.game-card-v2 .gc-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.game-card.game-card-v2 .gc-league {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: linear-gradient(45deg, #2b0b59, #7526aa, #960562);
    padding: 4px 8px !important;
    border-radius: 6px !important;
    letter-spacing: .04em !important;
}

.game-card.game-card-v2 .gc-time {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: #9aa0a6 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}
/* Miolo escuro */
.game-card.game-card-v2 .gc-board {
    background: #a8a8a821 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    gap: 3px;
    display: grid;
}

.game-card.game-card-v2 .gc-team {
    display: grid !important;
    grid-template-columns: 26px 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    background: white;
    border-radius: 5px;
    padding: 5px;
    width: 170px;
}

    .game-card.game-card-v2 .gc-team + .gc-team {
        border-top: 1px solid rgb(255 255 255 / 62%) !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

.game-card.game-card-v2 .gc-logo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #fff !important;
    padding: 2px !important;
    object-fit: contain !important;
    max-width: 30px;
    margin: 0;
}

.game-card.game-card-v2 .gc-name {
    color: #3d3d3d !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left;
}

.game-card.game-card-v2 .gc-score {
    font-weight: 900 !important;
    font-size: 16px !important;
    color: rgb(77 23 126) !important;
    min-width: 44px !important;
    text-align: center !important;
    background: rgb(226 226 226 / 54%) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
}

@media (max-width:700px) {
    .games-carousel.games-timeline {
        grid-template-columns: 20px 1fr 20px !important;
    }

    .game-card.game-card-v2 {
        min-width: 170px !important;
        max-width: 200px !important;
    }

    .carousel-btn {
        font-size: 35px;
        width: 20px;
    }
}

/* topo do card: esquerda (sigla + data) e direita (hora) */
.game-card.game-card-v2 .gc-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.game-card.game-card-v2 .gc-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* badge de data */
.game-card.game-card-v2 .gc-date {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: rgba(0,0,0,.35) !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
}

.gc-board-result{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.gc-team{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-width:0;
}

.gc-logo{
    width:74px;
    height:74px;
    object-fit:contain;
    margin-bottom:10px;
}

.gc-name{
    display:block;
    font-size:15px;
    line-height:1.2;
    font-weight:700;
    color:#2f2358;
    max-width:170px;
    text-align:center;
}

.gc-scorebox{
    min-width:150px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(54, 23, 97, .10);
}

.gc-scorebox .gc-score{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3eefb;
    color:#5a2595;
    font-size:24px;
    font-weight:800;
}

.gc-x{
    font-size:28px;
    font-weight:900;
    color:#5a2595;
}