/* ============================================================
   BRACKET PAGE CSS (isolated)
   - Desktop: 4 columns grid (no horizontal scroll)
   - Mobile: horizontal scroll (readability)
   ============================================================ */

/* wrapper for bracket page card (optional but recommended) */
.bracket-wrap{
  padding:16px 16px 12px 16px;
}

/* Headings inside bracket card */
.bracket-wrap h1{
  margin:0 0 6px;
  font-size:22px;
}
.bracket-wrap .small{
  color:rgba(255,255,255,.60);
}

/* =========================
   LAYOUT
   ========================= */

/* Desktop layout: grid, no horizontal scroll */
.bracket{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
  width:100%;
  overflow:hidden;
  padding:10px 0 14px;
}

.bracket-col{
  min-width:0;
}

.bracket-col h3{
  margin:0 0 4px;
  font-size:14px;
  font-weight:900;
  color:rgba(255,255,255,.78);
}

.bracket-col .sub{
  margin:0 0 12px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.bracket-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Ladder offsets (subtle for grid) */
.bracket-col[data-round="QF"] .bracket-stack{ padding-top:18px; }
.bracket-col[data-round="SF"] .bracket-stack{ padding-top:44px; }
.bracket-col[data-round="F"]  .bracket-stack{ padding-top:78px; }

/* =========================
   MATCH CARD
   ========================= */

.match-card{
  display:block;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
height: 140px; /* одна высота для всех */
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 200px at 20% -20%, rgba(124,92,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow:0 12px 34px rgba(0,0,0,.38);

  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.match-card:hover{
  transform:translateY(-2px);
  border-color:rgba(124,92,255,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.48);
}

/* Header */
.match-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.match-id{
  font-size:12px;
  color:rgba(255,255,255,.55);
  font-weight:650;
  white-space:nowrap;
}

/* Status pill */
.tag{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.70);
  white-space:nowrap;
}

.tag.scheduled{ color:rgba(255,255,255,.65); }
.tag.finished{ color:#9be7ff; border-color:rgba(81,182,255,.45); }
.tag.paused{ color:#ffd59b; border-color:rgba(255,180,80,.50); }
.tag.live{
  color:#e0d0ff;
  border-color:rgba(124,92,255,.55);
  position:relative;
  padding-left:24px;
}

/* LIVE pulse dot */
.tag.live::before{
  content:"";
  position:absolute;
  left:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7c5cff;
  box-shadow:0 0 0 0 rgba(124,92,255,.55);
  animation:livePulse 1.1s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(124,92,255,.55); }
  70%{ box-shadow:0 0 0 10px rgba(124,92,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,92,255,0); }
}

/* Meta line: Map/BO + Score */
.match-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 10px 4px 10px;
}

.meta-left{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.pill{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  font-size:10px;
  font-weight:900;
  color:rgba(255,255,255,.70);
  line-height:1;
  white-space:nowrap;
}

.pill.score{
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.86);
}

/* Teams */
.team-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  position:relative;
}

.team-row + .team-row{
  border-top:1px solid rgba(255,255,255,.07);
}

.team-name{
  font-size:12px;
  font-weight:950;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:150px;
}

.team-muted{
  color:rgba(255,255,255,.45);
  font-weight:750;
}

.team-score{
  min-width:24px;
  text-align:right;
  font-size:12px;
  font-weight:950;
  color:rgba(255,255,255,.85);
}

/* Winner / loser indicator */
.team-row.win{
  background:linear-gradient(90deg, rgba(60,200,120,.18), rgba(60,200,120,.06), transparent);
}
.team-row.lose{
  opacity:.48;
}

.team-row.win::before,
.team-row.lose::before{
  content:"";
  position:absolute;
  left:10px;
  width:6px;
  height:16px;
  border-radius:6px;
}

.team-row.win::before{ background:#3cc878; }
.team-row.lose::before{ background:rgba(255,255,255,.16); }

.team-row.win .team-name,
.team-row.lose .team-name{
  padding-left:12px;
}

/* =========================
   RESPONSIVE
   ========================= */

/* If screen is narrow, switch to horizontal scroll with comfy cards */
@media (max-width: 980px){
  .bracket{
    display:flex;
    gap:14px;
    overflow:auto;
    padding:10px 6px 14px;
  }
  .bracket-col{ min-width:270px; }

  /* slightly larger for readability */
  .pill{ height:20px; font-size:11px; padding:0 9px; }
  .team-name{ max-width:190px; font-size:13px; }
  .team-score{ font-size:13px; min-width:28px; }
  .match-top{ padding:10px 12px; }
  .match-meta{ padding:10px 12px 6px 12px; }
  .team-row{ padding:10px 12px; }

  /* ladder offsets can be stronger in scroll mode */
  .bracket-col[data-round="QF"] .bracket-stack{ padding-top:26px; }
  .bracket-col[data-round="SF"] .bracket-stack{ padding-top:82px; }
  .bracket-col[data-round="F"]  .bracket-stack{ padding-top:176px; }
}
/* ============================================================
   FORCE WIDE BRACKET CARD (NO BREAK OTHER PAGES)
   ============================================================ */

.card.bracket-wrap{
  max-width: 1400px !important;
  width: 1150px !important;
/*max-width: 100% !important;
/*width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

/* если у тебя есть глобальный container */
.container .card.bracket-wrap,
.page .card.bracket-wrap{
  max-width: 100% !important;
}

/* иногда родитель ограничивает ширину */
.bracket-wrap{
  overflow: visible;
}
/* =========================================
   BRACKET VISUAL CENTERING (READABILITY)
   ========================================= */

/* базовый шаг = высота карточки + gap */
:root{
  --match-h: 118px;
  --gap: 14px;
}

/* R16 — без смещения */
.bracket-col[data-round="R16"] .bracket-stack{
  padding-top: 0;
}

/* QF — центр между двумя матчами R16 */
.bracket-col[data-round="QF"] .bracket-stack{
  padding-top: calc(
    (var(--match-h) + var(--gap)) / 2
  );
}

/* SF — центр между двумя QF */
.bracket-col[data-round="SF"] .bracket-stack{
  padding-top: calc(
    var(--match-h) + var(--gap)
  );
}

/* FINAL — строго по центру всей сетки */
.bracket-col[data-round="F"]{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bracket-col[data-round="F"] .bracket-stack{
  padding-top: 0;
}
/* Map background for match cards */
.match-card.has-map{
  position: relative;
  overflow: hidden;
}

.match-card.has-map::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--map-bg);
  background-size: cover;
  background-position: center;
  opacity:.38;                    /* БЫЛО .22 */
  filter: saturate(1.25) contrast(1.15);
  transform:scale(1.08);
  pointer-events:none;
}

.match-card.has-map::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(6,10,20,.55),
    rgba(6,10,20,.85)
  );
  pointer-events:none;
}

/* чтобы контент был поверх */
.match-card.has-map > *{
  position: relative;
  z-index: 1;
}
.third-place-wrap { margin-top: 10px; }
.third-title { margin: 0; font-size: 16px; font-weight: 800; }

.third-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 14px;
}

.third-card{
  max-width: 520px;
}

@media (max-width: 820px){
  .third-grid{ grid-template-columns: 1fr; }
  .third-card{ max-width: 100%; }
}
/* 3rd place: card not full width */
.third-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-start;
}

.match-card.third-card{
  width: 260px;          /* как “раньше” по ощущениям */
  max-width: 100%;
}
/* Map background for match-card third-card */
.match-card third-card{
  position: relative;
  overflow: hidden;
}

.match-card third-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--map-bg);
  background-size: cover;
  background-position: center;
  opacity:.38;                    /* БЫЛО .22 */
  filter: saturate(1.25) contrast(1.15);
  transform:scale(1.08);
  pointer-events:none;
}

.match-card third-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(6,10,20,.55),
    rgba(6,10,20,.85)
  );
  pointer-events:none;
}