/* === CAROUSEL WRAPPER === */
.carousel-container {
  position: relative;
  margin: 30px 20px;
}

/* === HORIZONTAL RAIL === */
.carousel {
  display: flex;              /* 🔑 THIS is what makes it horizontal */
  flex-direction: row;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 10px 40px;
  white-space: nowrap;
}

.carousel::-webkit-scrollbar {
  display: none;
}

/* === CARD === */
.card {
  flex: 0 0 auto;              /* 🔑 prevents wrapping */
  width: 220px;
  min-height: 110px;
  background: #0b162a;
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: #fff;
  border: 1px solid #1f3b63;
  transition: transform 0.2s ease, background 0.2s ease;
}

.card:hover {
  background: #122b45;
  transform: translateY(-3px);
}

/* === CARD CONTENT === */
.card .date {
  font-size: 13px;
  opacity: 0.85;
}

.card .matchup {
  font-weight: bold;
  margin: 6px 0;
}

.card .score {
  font-size: 14px;
}

.score.W { color: #4caf50; }
.score.L { color: #f44336; }

/* === ARROWS === */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border: none;
  color: #fff;
  width: 36px;
  height: 60px;
  cursor: pointer;
  z-index: 5;
  border-radius: 6px;
}

.left-btn { left: 0; }
.right-btn { right: 0; }