/* ---------------------------------------------------------------------------
   Fearless Game Draft Cards
   (scoped to #fearless-games-section / #fearless-games-grid)
--------------------------------------------------------------------------- */

/* 2 game cards per row normally */
#fearless-games-grid {
  /* .teams-grid (from teamcards.css) already sets display:grid, gap, etc. */
  grid-template-columns: repeat(2, 1fr);
}

/* On mobile: 1 card per row */
@media (max-width: 768px) {
  #fearless-games-grid {
    grid-template-columns: 1fr;
  }
}

/* Game card is a .team-card (from teamcards.css) with slightly different layout */
.game-card {
  align-items: stretch;
  text-align: left;
}

.game-card-header {
  width: 100%;
  margin-bottom: 0.75rem;
}

.game-label {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #c5c5ff;
  margin-bottom: 0.25rem;
}

.game-teams {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 1rem;
}

.game-team-name {
  font-weight: 600;
}

.game-vs {
  opacity: 0.8;
}

.game-heroes {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Series layout */

.series-block {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}

.series-block:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.series-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.9;
  margin-bottom: 0.3rem;
}

/* Hero rows */

.hero-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.hero-label {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 110px;
  color: #ddd;
  white-space: nowrap; /* keep "Team X Picks" on one line */
}

.hero-icons {
  display: flex;
  flex-wrap: nowrap;      /* force all 5 icons onto a single line */
  gap: 0.35rem;
  overflow-x: auto;       /* if it's too tight on small screens, allow horizontal scroll */
}

/* Bigger hero icons for easy identification */
.hero-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
}

.hero-none {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Notes + Dotabuff link */

.game-notes {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.dotabuff-link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #71b5ff;
  text-decoration: none;
}

.dotabuff-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Lane grid: Safelane / Mid / Offlane
--------------------------------------------------------------------------- */

.series-lane-grid {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) repeat(3, minmax(90px, 1fr));
  gap: 0.3rem 0.4rem;
  align-items: center;
  margin: 0.2rem 0 0.5rem;
}

.lane-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.85;
}

.lane-team-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.lane-heroes {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

/* Slightly smaller icons inside the lane grid for space */
.lane-heroes .hero-icon {
  width: 36px;
  height: 36px;
}

@media (max-width: 600px) {
  .series-lane-grid {
    grid-template-columns: minmax(80px, 1.2fr) repeat(3, minmax(60px, 1fr));
  }

  .lane-heroes .hero-icon {
    width: 28px;
    height: 28px;
  }
}