/* ===========================================================================
   v5.17.9 — Schedule clarity + full-width desktop layout + flag containment
   =========================================================================== */

/* Defensive: any naked SVG inside the home-screen cards (Hot Pick, Next Match)
   gets clamped to a sensible mini-flag size. Belt-and-braces alongside the
   .mini-flag wrappers we added in engagement.js. */
.home-hot svg, .home-next svg, .home-daily svg {
  max-width: 32px;
  max-height: 24px;
  vertical-align: middle;
  display: inline-block;
}
.home-hot .mini-flag, .home-next .mini-flag {
  display: inline-block;
  width: 26px; height: 18px;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.home-hot .mini-flag svg, .home-next .mini-flag svg {
  width: 100%; height: 100%; display: block;
  max-width: none; max-height: none;
}

/* ---------------------------------------------------------------------------
   Full-width desktop: tournament body now uses up to 1400px on desktop and
   100% on narrower screens. Inner cards stretch to their parent.
   --------------------------------------------------------------------------- */
.tourn-body {
  padding: 18px clamp(14px, 3vw, 36px) !important;
}
.tourn-body > .groups-grid,
.tourn-body > .upcoming-head,
.tourn-body > .upcoming-list,
.tourn-body > .bracket-wrap,
.tourn-body > .bets-block,
.tourn-body > .lb-wrap,
.tourn-body > .home-screen,
.tourn-body > .stage-done {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media (min-width: 1100px) {
  .groups-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1500px) {
  .groups-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Upcoming header — clear status line: "Bet on X to play"
   --------------------------------------------------------------------------- */
.upcoming-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 10px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #c8d4e6;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.upcoming-cta {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffb04a;
  background: rgba(255,176,74,0.1);
  border: 1px solid rgba(255,176,74,0.35);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: none;
}
.upcoming-ok {
  font-weight: 700;
  color: #6ee7b7;
  background: rgba(110,231,183,0.1);
  border: 1px solid rgba(110,231,183,0.35);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.2px;
}

/* ---------------------------------------------------------------------------
   Match rows — restructured. Two-row layout on desktop:
     [HOME flag · vs · AWAY flag]   [STATUS BADGE]
     [odds: HOME · DRAW · AWAY]
   --------------------------------------------------------------------------- */
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}
.match-row {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main status"
    "odds odds";
  gap: 10px 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all .15s ease;
}
.match-row.played { opacity: 0.55; }
.match-row.user-match {
  border-color: rgba(255,176,74,0.55);
  background: linear-gradient(135deg, rgba(255,176,74,0.10) 0%, rgba(252,209,22,0.06) 100%);
  box-shadow: 0 0 0 1px rgba(255,176,74,0.2);
}
.match-row.has-bet {
  border-color: rgba(110,231,183,0.4);
  background: rgba(110,231,183,0.06);
}
.match-row.user-match.has-bet {
  border-color: rgba(110,231,183,0.55);
  background: linear-gradient(135deg, rgba(110,231,183,0.10) 0%, rgba(252,209,22,0.04) 100%);
}
.match-row.hot {
  border-color: rgba(255,107,53,0.5);
  background: linear-gradient(135deg, rgba(255,107,53,0.12) 0%, rgba(252,209,22,0.06) 100%);
}

.match-row .row-main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.match-row .side {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px;
}
.match-row .side.home { justify-content: flex-start; }
.match-row .side.away { justify-content: flex-end; }
.match-row .side .mini-flag { width: 28px; height: 20px; }
.match-row .vs { color: #8fa3be; font-size: 12px; padding: 0 6px; }
.match-row .score { font-weight: 800; font-size: 18px; color: #fcd116; }

/* Status badge */
.row-status {
  grid-area: status;
  align-self: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.row-status.pending {
  color: #ffb04a;
  background: rgba(255,176,74,0.12);
  border: 1px solid rgba(255,176,74,0.45);
  animation: pulsePending 2.4s ease-in-out infinite;
}
@keyframes pulsePending {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,176,74,0.0); }
  50%     { box-shadow: 0 0 0 6px rgba(255,176,74,0.15); }
}
.row-status.mine-ok {
  color: #6ee7b7;
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.5);
}
.row-status.placed {
  color: #6ee7b7;
  background: rgba(110,231,183,0.08);
  border: 1px solid rgba(110,231,183,0.3);
}
.row-status.hot-tag {
  color: #ff9a4d;
  background: rgba(255,107,53,0.12);
  border: 1px solid rgba(255,107,53,0.45);
}
.row-status.done {
  color: #8fa3be;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Odds row (full-width strip beneath the matchup) */
.match-row .mini-odds {
  grid-area: odds;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.match-row .mini-odds .odd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all .12s ease;
  font-size: 14px;
}
.match-row .mini-odds .odd i {
  font-style: normal;
  font-weight: 600;
  color: #c8d4e6;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.match-row .mini-odds .odd b {
  color: #fcd116;
  font-weight: 800;
  font-size: 15px;
}
.match-row .mini-odds .odd:hover {
  background: rgba(252,209,22,0.12);
  border-color: rgba(252,209,22,0.45);
  transform: translateY(-1px);
}
.match-row .mini-odds .odd.placed {
  background: rgba(110,231,183,0.06);
  border-color: rgba(110,231,183,0.25);
}

/* Single-line layout on small screens */
@media (max-width: 640px) {
  .match-row {
    padding: 12px 14px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "status"
      "odds";
  }
  .row-status { justify-self: start; }
  .match-row .side { font-size: 13px; }
  .match-row .mini-odds .odd { padding: 8px 10px; font-size: 13px; }
  .match-row .mini-odds .odd b { font-size: 14px; }
  .upcoming-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}