html, body {
  /* scroll-behavior: auto !important; */
  overscroll-behavior: none;
  /* -webkit-overflow-scrolling removed - causes double scroll issue */
}

/* Wrapper для прижатия футера к низу */
.mbp-wrapper {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 37px); /* Мобилка: header 37px */
}

@media (min-width: 1024px) {
  .mbp-wrapper {
    min-height: calc(100vh - 47px); /* Десктоп: header 47px */
  }
}

.more-bets-page {
  flex-grow: 1; /* Растягивается и прижимает футер к низу */
}

.mb-title-time {
  background-color: var(--bg-secondary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px;
}

.period-name {
  align-items: end;
  display: flex;
  font-family: Proxima Nova,sans-serif;
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 700;
  gap: 10px;
  height: 14px;
  line-height: 14px;
  margin: 20px 10px 10px 10px;
}

.mb-back-info {
  align-items: center;
  display: flex;
  background-color: var(--bg-primary);
  gap: 15px;
  padding: 9px 8px 8px;
  transition: grid-template-columns .3s ease-in-out,padding .3s ease-in-out,height .3s ease-in-out;
}

.mb-favorite-star {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mb-favorite-star:hover {
  transform: scale(1.15);
}

.mb-favorite-star:active {
  transform: scale(0.95);
}

.bets-game-title {
  font-size: 20px;
  color: var(--text-secondary);
  font-weight: bold;
  font-family: 'Proxima Nova' ,sans-serif;
}
.mb-fixture-time {
  font-family: 'Proxima Nova Cond' ,sans-serif;
  font-size: 12px;
  color: var(--text-tertiary);
}


.morebets-header {
  align-items: start;
  background-color: var(--bg-primary);
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #1a1a1a;
  background: var(--bg-secondary, #1a1a1a);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.back-button .back-arrow-icon {
  width: 20px;
  height: 20px;
}

.match-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mb_sport-icon {
  width: 32px;
  height: 32px;
  /* object-fit: contain; */
}

.text-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sport-name {
  font-weight: bold;
  font-style: italic;
  color: var(--text-primary);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 16px;
}

.league-name {
  color: #fcfcfc !important;
  font-family: Proxima Nova Cond, sans-serif;
  line-height: 14px;
  font-size: 13px;
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
}

.match-title {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 4px;
  margin-bottom: 8px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--accent-blue);
}

/* Tabs - same gradient as TitleTimeGrid, attached below */
.tabs-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  overflow-x: auto;
  padding: 0;
  z-index: 100;
  position: sticky;
  top: 167px;
  /* Default gradient - will be overridden by sport-specific */
  background: linear-gradient(135deg, #1a3f1f, #28542c);
  border-radius: 0;
  /* Top line separator from TitleTimeGrid */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Tab buttons - separated by lines */
.tab-button {
  background-color: transparent;
  font-family: Proxima Nova, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  white-space: nowrap;
  flex: 1 1;
  text-align: center;
}

.tab-button:last-child {
  border-right: none;
}

/* Active tab - subtle highlight */
.tab-button.active {
  font-family: Proxima Nova, sans-serif;
  background-color: rgba(224, 224, 224, 0.06);
  border-radius: 0;
  color: #ffffff;
  font-weight: 700;
}

/* Tab indicator dot - shows if period has odds */
.tab-indicator {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-left: 6px;
  position: absolute;
  top: 5px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.tab-indicator.has-odds {
  background-color: #4ade80; /* Green - has odds */
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
}

.tab-indicator.no-odds {
  background-color: rgba(255, 255, 255, 0.25); /* Subtle gray - no odds */
}

.bets-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.period-section {
  margin: 0;
}

.odds-block {
  margin-top: 0;
  margin-bottom: 10px;
}

.odds-title {
  color: var(--text-tertiary);
  font-family: Proxima Nova, sans-serif;
  font-size: 12px;
  color: #d7e2f7;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-bottom: 8px;
  text-align: center;
}

.odds-teams-title {
  color: var(--text-tertiary);
  color: var(--text-tertiary);
  font-family: Proxima Nova,sans-serif;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin: 0;
  text-align: center;
}

.teamtotals-side {
  margin-top: 10px;
border-top: 1px solid var(--bg-tertiary);
}

.odds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 6px;
}

/* Specials */
.specials-container {
  padding-top: 10px;
}

.more-bets-specials-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  border-top: 2px solid var(--accent-blue);
}

.more-bets-specials-container > .more-bets-special-item {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 12px;
}

/* Moneyline */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  gap: 1px;
  margin-bottom: 1px;
}

.ml-button {
  width: 100%;
  align-items: center;
  font-family: 'Proxima Nova', sans-serif;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  line-height: 14px;
  justify-content: center;
  min-height: 38px;
  padding: 2px;
  text-align: center;
  box-sizing: border-box;
}

/* All bet buttons - same style */
.ml-button,
.spread-button,
.totals-button,
.team-button,
.special-button,
.session-button {
  position: relative;
  overflow: visible;
  transition: background 0.15s ease;
}

/* ===== ЛИНИИ ЧЕРЕЗ BOX-SHADOW (снаружи элементов) ===== */

/* MoneyLine - все ячейки: линия справа и снизу */
.ml-grid > div {
  box-shadow:
    1px 0 0 0 rgba(0, 0, 0, 0.3),
    0 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* MoneyLine 3 колонки: убираем правую линию у последнего столбца */
.ml-grid.ml-three-cols > div:nth-child(3n) {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* MoneyLine 2 колонки: убираем правую линию у последнего столбца */
.ml-grid.ml-two-cols > div:nth-child(even) {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* MoneyLine: убираем нижнюю линию у последнего ряда */
.ml-grid.ml-three-cols > div:nth-last-child(-n+3) {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}
.ml-grid.ml-three-cols > div:nth-last-child(-n+3):nth-child(3n) {
  box-shadow: none;
}
.ml-grid.ml-two-cols > div:nth-last-child(-n+2) {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}
.ml-grid.ml-two-cols > div:nth-last-child(-n+2):nth-child(even) {
  box-shadow: none;
}

/* Spreads - линия справа для левой колонки, снизу для всех */
.spreads-grid > div:nth-child(odd) {
  box-shadow:
    1px 0 0 0 rgba(0, 0, 0, 0.3),
    0 1px 0 0 rgba(0, 0, 0, 0.3);
}

.spreads-grid > div:nth-child(even) {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* Spreads: убираем нижнюю линию у последнего ряда */
.spreads-grid > div:nth-last-child(-n+2):nth-child(odd) {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}
.spreads-grid > div:nth-last-child(-n+2):nth-child(even) {
  box-shadow: none;
}

/* Totals - вертикальная линия между колонками */
.totals-col:first-child {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}

/* Totals - горизонтальные линии на каждой кнопке-обёртке, кроме последней */
.totals-col > div {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.totals-col > div:last-child {
  box-shadow: none;
}

/* TeamTotals - вертикальная линия между колонками */
.team-col:first-child {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}

/* TeamTotals - горизонтальные линии на каждой кнопке-обёртке, кроме последней */
.team-col > div {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.team-col > div:last-child {
  box-shadow: none;
}

/* Labels - линия снизу */
.ml-labels,
.spreads-labels,
.totals-labels,
.team-labels {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* Hover state - desktop only */
@media (min-width: 1024px) {
  .ml-button:hover,
  .spread-button:hover,
  .totals-button:hover,
  .team-button:hover,
  .special-button:hover,
  .session-button:hover,
  .specials-default-button:hover {
    background: rgba(75, 75, 82, 1);
  }
}

/* Active/selected state */
.ml-button.active,
.spread-button.active,
.totals-button.active,
.team-button.active,
.special-button.active,
.session-button.active,
.specials-default-button.active {
  background: rgba(90, 90, 100, 1);
}

/* Handicap/label - BLUE color */
.special-label {
  color: #60a5fa !important;
  font-weight: 600;
  font-size: 13px;
}

/* Odds value - WHITE color */
.value {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: 14px;
}

/* Spreads */
.spreads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  gap: 1px;
  margin-bottom: 1px;
}

.spread-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.spread-button {
  width: 100%;
  align-items: center;
  font-family: 'Proxima Nova', sans-serif;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  justify-content: space-between;
  min-height: 31px;
  padding: 0 10px;
  text-align: center;
  box-sizing: border-box;
}

/* Totals */
.totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  gap: 1px;
  margin-bottom: 1px;
}

.totals-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.totals-button {
  width: 100%;
  align-items: center;
  font-family: 'Proxima Nova', sans-serif;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  font-weight: 700;
  height: 38px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  text-align: center;
  box-sizing: border-box;
}

/* Team Totals */
.team-totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  gap: 1px;
  margin-bottom: 1px;
}

.team-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.team-button {
  width: 100%;
  align-items: center;
  font-family: 'Proxima Nova', sans-serif;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 13px;
  font-weight: 600;
  height: 38px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  text-align: center;
  box-sizing: border-box;
}


/* Specials Buttons */
.special-button {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-family: Proxima Nova,sans-serif;
  font-size: 13px;
  font-weight: 600;
  height: 38px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  text-align: center;
  width: 100%;
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

.special-label {
  color: #60a5fa;
  font-family: 'Proxima Nova' ,sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.special-price {
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Proxima Nova' ,sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* Default Specials Layout (fallback when no category is matched) */
.specials-default-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1px;
  background: linear-gradient(90deg, #333338 0%, #3d3d44 100%);
}

.specials-default-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Proxima Nova', sans-serif;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  height: 38px;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

.specials-default-button:last-child {
  box-shadow: none;
}

/* Sessions Layout */
.sessions-section {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  border-left: none;
}

.sessions-title {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #c1c1c1;
  margin: 0 10px;
  text-transform: uppercase;
}

.sessions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  gap: 1px;
}

.session-button {
  font-family: 'Proxima Nova', sans-serif;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  height: 38px;
  min-height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s ease;
  cursor: pointer;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

.session-button:last-child {
  box-shadow: none;
}
.ml-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  gap: 1px;
}

.ml-three-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1px;
  gap: 1px;
  margin-bottom: 1px;
}

/* Hover + active на desktop */
@media (min-width: 1024px) {
  .ml-button:hover.active,
  .spread-button:hover.active,
  .totals-button:hover.active,
  .special-button:hover.active,
  .team-button:hover.active,
  .session-button:hover.active,
  .specials-default-button:hover.active {
    background: rgba(100, 100, 110, 1);
  }
}

.ml-button.active .special-label,
.spread-button.active .special-label,
.totals-button.active .special-label,
.special-button.active .special-label,
.team-button.active .special-label,
.session-button.active .special-label {
  color: var(--text-secondary);
}


.special-button.active .special-price {
  color: var(--text-secondary) !important;
}

/* Locked style for all button types */
.ml-button.locked,
.spread-button.locked,
.totals-button.locked,
.special-button.locked,
.team-button.locked,
.session-button.locked {
  pointer-events: none;
  width: 100%;
  opacity: 0.3;
}

.tt-row {
  display: flex;
  gap: 4px;
}

.lock-indicator {
  color: #414141;
  font-size: 12px;
  margin-left: 8px;
  display: flex;
  align-items: end;
}

.lock-icon {
  fill: #7c7c7c;
  height: 12px;
  margin-right: 6px;
  width: 12px;
}

.lock-text {
  color: #7c7c7c;
  font-size: 12px;
  line-height: 11px;
  font-weight: 500;
}


/* Wrappers с градиентом */
.ml-wrapper,
.spreads-wrapper,
.totals-wrapper,
.team-wrapper {
  background: linear-gradient(90deg, #333338 0%, #3d3d44 100%);
}

/* Labels containers - прозрачные внутри wrapper */
.ml-labels,
.spreads-labels,
.totals-labels,
.team-labels {
  background-color: transparent;
  margin-bottom: 1px;
}

.ml-label,
.spreads-label,
.totals-label,
.team-label {
  color: rgb(193, 193, 193);
  font-family: Proxima Nova, sans-serif;
  font-size: 12px;
  line-height: 13px;
  margin: 5px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}



@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}


/* ============================================
   FLASH АНИМАЦИИ - Подсветка коэффициента
   ============================================ */

/* Анимация роста (зеленый) */
.ml-button.flash-up,
.spread-button.flash-up .value,
.totals-button.flash-up .value,
.team-button.flash-up .value,
.special-button.flash-up .special-price,
.session-button.flash-up .special-price {
  animation: glowGreen 1.5s ease-out forwards;
}

/* Анимация падения (красный) */
.ml-button.flash-down,
.spread-button.flash-down .value,
.totals-button.flash-down .value,
.team-button.flash-down .value,
.special-button.flash-down .special-price,
.session-button.flash-down .special-price {
  animation: glowRed 1.5s ease-out forwards;
}

/* Подсветка зеленым (рост) */
@keyframes glowGreen {
  0%, 50% {
    color: var(--accent-green);
    font-weight: 700;
  }
  100% {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
  }
}

/* Подсветка красным (падение) */
@keyframes glowRed {
  0%, 50% {
    color: #ef4444;
    font-weight: 700;
  }
  100% {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
  }
}

.mb-back-info--compact {
  align-items: center;
  display: flex;
  gap: 5px;
  height: 20px;
  padding: 3px 4px;
  background-color: black;
  transition: grid-template-columns .3s ease-in-out,padding .3s ease-in-out,height .3s ease-in-out;
}

  .back-button--compact {
  display: none;
  align-self: center;
  background-color: #222c45;
  border: 1px solid var(--accent-blue)7d;
  border-radius: 2px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: Proxima Nova,sans-serif;
  font-size: 12px;
  padding: 1px 10px;
  transition: all 0.3s ease-in-out;
}

.mb_sport-icon--compact {
  height: 16px;
  object-fit: contain;
  width: 16px;
  transition: all 0.3s ease-in-out;
}

.text-info--compact {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.sport-name--compact {
  font-size: 14px;
  font-weight: 900;
  line-height: 16px;
  transition: all 0.3s ease-in-out;
  }

.league-name--compact {
  font-family: Proxima Nova Cond,sans-serif;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 14px;
  transition: all 0.3s ease-in-out;
 }

 .mb-title-time--compact {
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 2px;
  transition: all 0.3s ease-in-out;
  }

.bets-game-title--compact {
  color: var(--text-secondary);
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  }
.mb-fixture-time--compact {
  color: var(--text-tertiary);
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  transition: all 0.3s ease-in-out;
  }


.tabs-container--compact {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  z-index: 2222;
  overflow-x: auto;
  padding: 0;
  position: sticky;
  top: 100px;
  /* Same gradient as TitleTimeGrid */
  background: linear-gradient(135deg, #1a3f1f, #28542c);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.morebets-header--compact {
  align-items: start;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  position: sticky;
  top: 36px;
  z-index: 2222;

  /* Force GPU rendering to prevent Safari address bar shifting */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  }

/* transitions for these elements only if visually needed, otherwise removed */

.mb-title-time-grid {
  grid-gap: 4px;
  align-items: center;
  /* Default sport gradient */
  background: linear-gradient(135deg, #1a3f1f, #28542c);
  border-radius: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr auto 1fr;
  min-height: 35px;
  padding: 12px 10px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

/* Sport-specific gradients for TitleTimeGrid */
.mb-title-time-grid[data-sport="1"] { background: linear-gradient(135deg, #1a3f1f, #28542c); }
.mb-title-time-grid[data-sport="2"] { background: linear-gradient(135deg, #513517, #634523); }
.mb-title-time-grid[data-sport="3"] { background: linear-gradient(135deg, #3e1f0d, #5a2d1a); }
.mb-title-time-grid[data-sport="4"] { background: linear-gradient(135deg, #3F4853, #56595C); }
.mb-title-time-grid[data-sport="5"] { background: linear-gradient(135deg, #1B222B, #222C37); }
.mb-title-time-grid[data-sport="6"] { background: linear-gradient(135deg, #0E2A5A, #1E4A82); }
.mb-title-time-grid[data-sport="7"] { background: linear-gradient(135deg, #512A0D, #81512D); }
.mb-title-time-grid[data-sport="8"] { background: linear-gradient(135deg, rgb(20, 33, 61), rgb(31, 54, 92)); }
.mb-title-time-grid[data-sport="9"] { background: linear-gradient(135deg, #4A0E14, #7A1E24); }
.mb-title-time-grid[data-sport="10"] { background: linear-gradient(135deg, rgb(50, 121, 255), rgb(14, 37, 78)); }
.mb-title-time-grid[data-sport="11"] { background: linear-gradient(135deg, #7F2F00, #B84E14); }
.mb-title-time-grid[data-sport="23"] { background: linear-gradient(135deg, #7F2F00, #B84E14); }

/* Sport-specific gradients for mbp-live-info-bar */
.mbp-live-info-bar[data-sport="1"] { background: linear-gradient(135deg, #1a3f1f, #28542c); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="2"] { background: linear-gradient(135deg, #513517, #634523); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="3"] { background: linear-gradient(135deg, #3e1f0d, #5a2d1a); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="4"] { background: linear-gradient(135deg, #3F4853, #56595C); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="5"] { background: linear-gradient(135deg, #1B222B, #222C37); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="6"] { background: linear-gradient(135deg, #0E2A5A, #1E4A82); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="7"] { background: linear-gradient(135deg, #512A0D, #81512D); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="8"] { background: linear-gradient(135deg, rgb(20, 33, 61), rgb(31, 54, 92)); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="9"] { background: linear-gradient(135deg, #4A0E14, #7A1E24); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="10"] { background: linear-gradient(135deg, rgb(50, 121, 255), rgb(14, 37, 78)); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="11"] { background: linear-gradient(135deg, #7F2F00, #B84E14); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mbp-live-info-bar[data-sport="23"] { background: linear-gradient(135deg, #7F2F00, #B84E14); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

/* Sport-specific gradients for tabs-container */
.tabs-container[data-sport="1"] { background: linear-gradient(135deg, #1a3f1f, #28542c); }
.tabs-container[data-sport="2"] { background: linear-gradient(135deg, #513517, #634523); }
.tabs-container[data-sport="3"] { background: linear-gradient(135deg, #3e1f0d, #5a2d1a); }
.tabs-container[data-sport="4"] { background: linear-gradient(135deg, #3F4853, #56595C); }
.tabs-container[data-sport="5"] { background: linear-gradient(135deg, #1B222B, #222C37); }
.tabs-container[data-sport="6"] { background: linear-gradient(135deg, #0E2A5A, #1E4A82); }
.tabs-container[data-sport="7"] { background: linear-gradient(135deg, #512A0D, #81512D); }
.tabs-container[data-sport="8"] { background: linear-gradient(135deg, rgb(20, 33, 61), rgb(31, 54, 92)); }
.tabs-container[data-sport="9"] { background: linear-gradient(135deg, #4A0E14, #7A1E24); }
.tabs-container[data-sport="10"] { background: linear-gradient(135deg, rgb(50, 121, 255), rgb(14, 37, 78)); }
.tabs-container[data-sport="11"] { background: linear-gradient(135deg, #7F2F00, #B84E14); }
.tabs-container[data-sport="23"] { background: linear-gradient(135deg, #7F2F00, #B84E14); }

/* Для лайв игр - без скругления (т.к. сверху есть live-info-bar) */
.mb-title-time-grid--live {
  border-radius: 0;
}

/* Для премматча - верхние углы скруглены (нет таба сверху) */
.mb-title-time-grid:not(.mb-title-time-grid--live) {
  border-radius: 8px 8px 0 0;
}

.mb-title-time-grid--compact {
  grid-template-columns: 3.5fr .8fr 2.2fr .8fr 3.5fr;
  align-items: center;
  display: grid;
  padding: 2px 10px;
  min-height: 33px;
  height: 33px;
}

.team-block {
  align-items: center;
  align-self: baseline;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

/* Плавное скрытие team-block в compact режиме */
.mb-title-time-grid--compact .team-block {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.team-logo-stacked {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override ParticipantIcon size for stacked layout (prematch) */
.team-logo-stacked.participant-icon--medium,
.team-logo-stacked.participant-icon--small,
.team-logo-stacked.participant-icon--large {
  width: 50px;
  height: 50px;
}

.team-name-stacked {
  color: var(--text-secondary);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  line-height: 1.2;
}

.team-name-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  flex: 1 1;
}
.compact-logo-left,
.compact-logo-right {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показываем compact элементы только в compact режиме */
.mb-title-time-grid--compact .compact-logo-left,
.mb-title-time-grid--compact .compact-logo-right {
  opacity: 1;
  transform: scale(1);
}

.compact-name-left,
.compact-name-right {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-family: Proxima Nova,sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-secondary);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mb-title-time-grid--compact .compact-name-left,
.mb-title-time-grid--compact .compact-name-right {
  opacity: 1;
  transform: translateY(0);
}

.fixture-time {
  align-items: center;
  color: #adb2b4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* LIVE badge for events without score data */
.mbp-live-badge {
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
  color: #fff;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: mbp-live-pulse 2s ease-in-out infinite;
}

@keyframes mbp-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Compact LIVE badge */
.mbp-live-badge.compact {
  font-size: 11px;
  padding: 3px 10px;
}

/* Скрываем обычное время в compact режиме */
.mb-title-time-grid--compact .fixture-time {
  opacity: 0;
  transform: scale(0.9);
}

.fixture-hour {
  font-family: Proxima Nova,sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fixture-date {
  font-family: Proxima Nova,sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-logo {
  height: 25px;
  width: 25px;
  border-radius: 2px;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
}

.team-logo.compact {
  transform: scale(0.5);
}

.compact-fixture-time {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  align-items: center;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показываем compact время только в compact режиме */
.mb-title-time-grid--compact .compact-fixture-time {
  opacity: 1;
  transform: scale(1);
}

.compact-fixture-hour {
  font-family: Proxima Nova,sans-serif;
  font-size: 11px;
  font-weight: 600;
  min-width: max-content;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-fixture-date {
  font-size: 10px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.team-name-stacked.no-logo {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: 'Proxima Nova', sans-serif;
}

.more-bets-page .tabs-container--compact ~ .bets-content {
  padding-top: 0; 
}


.more-bets-page {
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
.market-group-title {
  font-size: 13px;
  font-weight: 600;
  color: #7c7c7c;
  margin-top: 20px;
  margin-bottom: 4px;
  padding-left: 6px;
  text-transform: uppercase;
  font-family: 'Proxima Nova', sans-serif;
}

.market-name-title {
  align-items: center;
  border-bottom: 1px solid var(--bg-tertiary);
  color: #d7e2f7;
  display: flex;
  flex-direction: row;
  font-family: Proxima Nova,sans-serif;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}
.odds-section-wrapper {
  padding: 10px 0;
  margin: 0;
  border-top: 1px solid #333;
}

.odds-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.odds-lock-text {
  font-size: 24px;
  color: var(--text-primary);
  font-weight: bold;
  text-transform: uppercase;
}
.mb-lock-indicator-inline {
  align-items: center;
  display: inline-flex;
  margin-left: 6px;
}

.market-title {
  font-weight: 600;
  color: #d7e2f7;
  font-family: Proxima Nova, sans-serif;
  margin: 0 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.period-title {
  color: #7c7c7c;
  font-weight: 600;
  font-size: 12px;
  margin-left: 4px;
}
/*.team-name-stacked::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--bg-color, var(--bg-secondary)));
}*/

/* Header block sticky wrapper */
.header-block-wrapper { /* Safari compatibility */
  position: sticky;
  top: 36px;
  z-index: 2222;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  gap: 0;

  /* Force GPU rendering to prevent Safari address bar shifting */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.header-block-wrapper.compact {
  /* No transform needed - sticky handles positioning */
}


/* Плавные переходы для внутренних элементов mb-title-time-grid */
.team-logo-stacked,
.team-logo,
.team-name-stacked,
.compact-fixture-time,
.compact-fixture-hour,
.compact-fixture-date,
.fixture-time,
.fixture-hour,
.fixture-date {
  transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Compact/fixture selectors: smooth transitions, prevent flicker */
.compact-name-left,
.compact-name-right,
.compact-fixture-time,
.compact-fixture-hour,
.compact-fixture-date,
.fixture-time,
.fixture-hour,
.fixture-date {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}



.team-block.stacked-team .team-logo {
  width: 50px;
  height: 50px;
}





.team-name {
  color: var(--text-secondary);
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  text-align: center;
}

/* Team name stacked, with smooth transition for font size */
.team-name-stacked {
  font-size: 12px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.team-name-stacked.compact {
  font-size: 10px;
}



.fixture-time.compact {
  font-size: 10px;
}

.fixture-time.compact .fixture-hour {
  font-size: 11px;
}

.fixture-time.compact .fixture-date {
  font-size: 10px;
}
.mb-title-time-grid * {
  transition: opacity 0.3s ease-in-out;
  color: var(--text-primary);
}

.team-logo-wrapper{
  transition: opacity 0.3s ease-in-out;
}

.team-name-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  min-width: 0;
  max-width: 100%;
}
.odds-block.row .specials-row-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1px;
  width: 100%;
  margin-bottom: 1px;
}

.odds-block.column .specials-column-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 1px;
}

.odds-block.grid .specials-grid-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1px;
  gap: 1px;
  margin-bottom: 1px;
}

@media (min-width: 480px) {
  .odds-block.grid .specials-grid-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Для стандартных спешиалсов (Team Props, Player Props и т.д.) */
.specials-standard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0;
  gap: 0;
  background: linear-gradient(90deg, #333338 0%, #3d3d44 100%);
  margin-bottom: 1px;
}

/* На мобильных - одна колонка для длинных названий */
@media (max-width: 480px) {
  .specials-standard-grid {
    grid-template-columns: 1fr;
  }
}

/* Правая колонка (чётные элементы): только нижняя линия */
.specials-standard-grid .special-button:nth-child(even) {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

/* Последний элемент в левой колонке (нечётное количество): только правая линия */
.specials-standard-grid .special-button:last-child:nth-child(odd) {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}

/* Последний элемент в правой колонке (чётное количество): без теней */
.specials-standard-grid .special-button:last-child:nth-child(even) {
  box-shadow: none;
}

/* Предпоследний в левой колонке (когда чётное количество): только правая линия */
.specials-standard-grid .special-button:nth-last-child(2):nth-child(odd) {
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.3);
}

/* На мобильных (1 колонка) - только нижняя линия, без правой */
@media (max-width: 480px) {
  .specials-standard-grid .special-button {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
  }
  .specials-standard-grid .special-button:last-child {
    box-shadow: none;
  }
}

/* Для Correct Score */
.correct-score-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1px;
  gap: 1px;
}


.correct-score-grid button {
  background: rgba(56, 56, 61, 1);
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  font-size: 14px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  display: flex;
  padding: 5px;
}

/* Correct Score Dropdown UI */
.correct-score-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.correct-score-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
}

.correct-score-team-name {
  flex: 1 1;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.correct-score-select {
  width: 70px;
  padding: 8px 12px;
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--bg-quaternary);
  border-radius: 6px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23888%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* Safari option styling (limited support) */
.correct-score-select option {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 500;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  padding: 8px;
}

.correct-score-select:focus {
  outline: none;
  border-color: #4a90d9;
  border-color: var(--accent-color, #4a90d9);
}

.correct-score-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.correct-score-result {
  margin-top: 8px;
}

.correct-score-bet-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  background: rgba(56, 56, 61, 1);
  height: 38px;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: none;
}

.correct-score-bet-button.active {
  background: rgba(255, 255, 255, 0.15);
  border: none;
}

@media (min-width: 1024px) {
  .correct-score-bet-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
  }

  .correct-score-bet-button:hover.active:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
  }
}

.correct-score-bet-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.correct-score-bet-label {
  color: #60a5fa;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.correct-score-bet-button.active .correct-score-bet-label {
  color: var(--text-secondary);
}

.correct-score-bet-odds {
  color: var(--text-secondary);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

/* Flash animations on odds only */
.correct-score-bet-button.flash-up .correct-score-bet-odds {
  animation: glowGreen 1.5s ease-out forwards;
}

.correct-score-bet-button.flash-down .correct-score-bet-odds {
  animation: glowRed 1.5s ease-out forwards;
}

.correct-score-no-odds {
  text-align: center;
  padding: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--bg-tertiary);
  border-radius: 6px;
}

.no-bets-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  animation: fadeInUp 0.6s ease-out;
}

.no-bets-message-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  opacity: 0.6;
  color: var(--text-tertiary);
}

.no-bets-message-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.no-bets-message-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.no-bets-message-subtext {
  font-size: 13px;
  color: #636366;
  font-weight: 400;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mb-title-time-grid--with-score {
  grid-template-columns: 3fr .7fr 1.5fr .7fr 3fr;
}

.compact-live-label,
.live-label {
  background-color: var(--accent-red);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: normal;
  font-size: 10px;
}

.bp-score-left,
.bp-score-right {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 100%;
}

/* --- PATCH: Compact logo block styles --- */
.compact-logo-block {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: row;
}


.compact-score {
  border-radius: 4px;
  font-family: Proxima Nova,sans-serif;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  gap: 5px;
  line-height: 18px;
  min-height: 18px;
  padding: 2px 7px;
}
.bp-score-box {
  border-radius: 6px;
  font-family: Proxima Nova,sans-serif;
  font-weight: 900;
  font-size: 20px;
  justify-content: center;
  line-height: 27px;
  min-width: 15px;
  gap: 5px;
  padding: 5px 10px;
}
.fixture-period {
  font-size: 11px;
  font-family: Proxima Nova,sans-serif;
  line-height: 11px;
  font-weight: bold;
  color: color(srgb 0.8979 0.898 0.9195);
  gap: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fixture-elapsed {
  font-size: 14px;
  font-family: Proxima Nova,sans-serif;
  line-height: 14px;
  font-weight: bold;
  color: color(srgb 0.8979 0.898 0.9195);
  gap: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mbp-red-card,
.mbp-red-card-inline
 {
  display: inline-block;
  padding: 2px 3px;
  margin: 0px 8px;
  border-radius: 1px;
  font-family: Proxima Nova Cond,sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 10px;
  color: var(--text-primary);
  background-color: color(srgb 0.79 0.139 0.1343);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.compact-fixture-period {
  font-size: 10px;
  font-family: Proxima Nova,sans-serif;
  line-height: 10px;
  font-weight: bold;
  color: color(srgb 0.8979 0.898 0.9195);
  gap: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.compact-fixture-elapsed {
  font-size: 12px;
  font-family: Proxima Nova,sans-serif;
  line-height: 12px;
  font-weight: bold;
  color: color(srgb 0.8979 0.898 0.9195);
  gap: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .header-block-wrapper {
    top: 0px;
  }
  .tabs-container {
    top: 125px;
  }
  .mb-back-info {
    padding: 2px 0px 10px;
  }


  .ml-button.value,
  .spread-button.value,
  .totals-button.value,
  .special-button.value,
  .team-button.value,
  .session-button.value
 {
    color: var(--text-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
}

/* Анимация смены счёта как на спортивном табло */
.score-digit-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  min-width: 1ch;
  vertical-align: top;
  height: 1.2em;
}

.score-digit-current {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.score-digit-new {
  display: inline-block;
  position: absolute;
  left: 0;
  top: -100%;
  animation: scoreSlideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.score-animating .score-digit-current {
  transform: translateY(100%);
  opacity: 0;
}

@keyframes scoreSlideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 1;
  }
}

/* Live info bar styles (period + minute) */
.mbp-live-info-bar {
  align-items: center;
  border-radius: 0;
  display: flex;
  gap: 4px;
  justify-content: left;
  padding: 8px 12px;
  /* Default gradient - overridden by sport-specific selectors */
  background: linear-gradient(135deg, #1a3f1f, #28542c);
}

.mbp-live-info-bar .live-logo {
  background-color: var(--accent-red);
  border-radius: 2px;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: bold;
  margin-right: 4px;
  padding: 1px 3px;
  text-transform: capitalize;
  font-family: 'Proxima Nova', sans-serif;
}

.mbp-live-info-bar .live-period-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Proxima Nova', sans-serif;
}

.mbp-live-info-bar .live-minute {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums; /* Equal-width digits */
  /*min-width: 48px;  Consistent width for all sports (handles soccer MM:SS format) */
  display: inline-block;
  text-align: center;
}

.mbp-live-info-bar .live-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.finished-logo {
  background-color: #d7d7d72e;
  border-radius: 2px;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: bold;
  margin-right: 4px;
  padding: 0 3px;
  text-transform: capitalize;
  font-family: 'Proxima Nova', sans-serif;
}

/* Tennis headers in mbp-live-info-bar */
.tennis-header-set-mini,
.tennis-header-pts-mini {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  text-transform: uppercase;
}

.tennis-header-serve-mini {
  /* Empty cell for serve column in headers */
  text-align: center;
}

.tennis-header-score-mini {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tennis-icon-svg {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1); /* Make SVG white */
}

/* Soccer mini icons (red card, corner kick) in headers */
.soccer-icon-mini {
  width: 13px;
  height: 13px;
  object-fit: contain;
  /* No filter - use original icon colors */
}

.soccer-header-cards,
.soccer-header-corners {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

/* ========================================
   Tennis Detailed Scores Layout
   ======================================== */

/* Tennis layout: 2 player rows (headers now in mbp-live-info-bar) */
.mb-title-time-grid--tennis {
  display: grid !important;
  grid-template-columns: 1fr !important; /* One full-width column for the container */
  grid-template-rows: auto auto !important; /* home row, away row */
  grid-gap: 0 !important;
  gap: 0 !important;
  padding: 0px 5px 0px 10px!important;
  height: auto !important; /* Allow container to grow */
  min-height: auto !important;
}

/* Tennis headers row (Set1, Set2, serve, pts, score) */
.tennis-headers {
  display: grid;
  /* grid-template-columns set dynamically in JSX based on number of sets */
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.tennis-header-player {
  /* Empty cell above player names */
  grid-column: 1;
}

.tennis-header-set,
.tennis-header-serve,
.tennis-header-pts {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
}

.tennis-header-score {
  text-align: center;
  font-size: 16px;
}

.tennis-icon {
  font-size: 16px;
}

/* Tennis player row (name + set scores + serve + points + overall score) */
.tennis-player-row {
  display: grid;
  /* grid-template-columns set dynamically in JSX based on number of sets */
  align-items: center;
  grid-gap: 1px;
  gap: 1px;
  padding: 4px 0;
  min-height: 24px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.tennis-home {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Player name + logo */
.tennis-player-name {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  overflow: hidden;
}

.tennis-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Container for name + participant info (flag, rank) */
.tennis-name-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
}

.tennis-name-text {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Set scores */
.tennis-set-score {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; /* Match grid column width */
  position: relative; /* For absolute positioning of tiebreak */
}

/* Tiebreak score - positioned top-right like math exponents (7⁹) */
.tiebreak-score {
  position: absolute;
  top: -2px; /* Lift up */
  right: -2px; /* Move closer to the number */
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary); /* White, same as main text */
  line-height: 1;
}

/* Serve indicator */
.tennis-serve {
  display: flex;
  align-items: center;
  justify-content: center; 
  width: 15px;
}

.serve-dot {
  font-size: 12px;
  color: #d4af37; /* Tennis ball yellow/gold */
  filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.6));
}

.serve-dot--volleyball {
  font-size: 12px;
  color: #4A90E2; /* Volleyball blue */
  filter: drop-shadow(0 0 2px rgba(74, 144, 226, 0.6));
}

.serve-dot--american-football {
  font-size: 12px;
  color: #8B4513; /* Football brown */
  filter: drop-shadow(0 0 2px rgba(139, 69, 19, 0.6));
}

/* Ball icons for serve/possession indicators */
.serve-ball-icon {
  width: 10px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
}

/* Current game points (0, 15, 30, 40, ADV) */
.tennis-points {
  min-height: 16px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; /* Fixed width to prevent jumping when points change */
}

/* Overall score (sets won) - bold */
.tennis-overall-score {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  min-width: 25px; /* Slightly wider for overall score */
  border-left: 1px solid #ffffff0d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* VAR indicator for MoreBetsPage - shows when goal is under VAR review */
.var-indicator-mbp {
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
  padding: 1px 3px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  animation: var-pulse-mbp 1.5s ease-in-out infinite;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 102, 204, 0.4);
}

@keyframes var-pulse-mbp {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* PEN indicator for MoreBetsPage - shows when penalty is being taken */
.pen-indicator-mbp {
  font-size: 8px;
  font-weight: 700;
  color: #000;
  background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
  padding: 1px 3px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  animation: pen-pulse-mbp 1s ease-in-out infinite;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 2px rgba(255, 140, 0, 0.5);
  margin-right: 2px;
}

@keyframes pen-pulse-mbp {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

/* Score chance indicator for MoreBetsPage - dangerous moment */
.score-chance-indicator-mbp {
  display: inline-flex;
  align-items: center;
  animation: score-chance-pulse-mbp 0.8s ease-in-out infinite;
}

.score-chance-indicator-mbp svg {
  filter: drop-shadow(0 0 2px rgba(0, 180, 255, 0.5));
}

@keyframes score-chance-pulse-mbp {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}

/* Responsive: reduce font sizes on smaller screens */
@media (max-width: 600px) {
  .tennis-headers {
    /* grid-template-columns set dynamically in JSX */
  }

  .tennis-player-row {
    /* grid-template-columns set dynamically in JSX */
  }

  .tennis-name-text {
    font-size: 14px; /* Larger for mobile */
  }

  .tennis-set-score {
    font-size: 12px;
  }

  .tennis-points {
    font-size: 12px;
  }

  .tennis-overall-score {
    font-size: 14px;
  }

  .tennis-header-set,
  .tennis-header-serve,
  .tennis-header-pts {
    font-size: 10px;
  }
}

/* ====================================
   Baseball Detailed Scores Styles
   ==================================== */

/* Baseball header row (R, 1-9, EI, H, E) */
.baseball-header-row {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding: 4px 8px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
  font-family: 'Proxima Nova', sans-serif;
}

.baseball-header-cell {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
}

/* Baseball service icons (bat.svg or baseball.svg) */
.baseball-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
}

.baseball-bat-icon,
.baseball-ball-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* Baseball pitchers info - separate row with top border (MoreBetsPage only) */
.baseball-pitchers-row {
  display: flex;
  font-family: Proxima Nova,sans-serif;
  justify-content: flex-end;
  padding: 4px 0 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.baseball-pitchers-text {
  color: #bbb7b7;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

.baseball-pitchers-text strong {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ====================================
   Baseball - LiveInfoBar Headers
   ==================================== */

.baseball-header-serve {
  /* Empty cell for service icon column in headers */
  text-align: center;
  min-width: 15px;
}

.baseball-header-runs {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
  min-width: 25px;
}

.baseball-header-inning {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
  min-width: 15px;
}

/* ====================================
   Baseball - Team Rows
   ==================================== */

.baseball-player-row {
  display: grid;
  /* grid-template-columns set dynamically in JSX */
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  padding: 4px 0;
  min-height: 24px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.baseball-home {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.baseball-away {
  /* Away team row - no special styles */
}

/* Player/Team name + logo */
.baseball-player-name {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.baseball-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.baseball-name-text {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overall score (Runs total) - bold */
.baseball-overall-score {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  min-width: 25px;
}

/* Inning scores (1-9, EI, H, E) */
.baseball-inning-score {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #c9c9cd;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
}

/* Responsive: reduce font sizes on smaller screens */
@media (max-width: 600px) {
  .baseball-name-text {
    font-size: 14px;
  }

  .baseball-inning-score {
    font-size: 13px;
  }

  .baseball-overall-score {
    font-size: 14px;
  }

  .baseball-header-runs,
  .baseball-header-inning {
    font-size: 10px;
  }
  .morebets-header--compact {
    margin: 0;
  }
}

/* ====================================
   Baseball - Info Bar Overrides
   ==================================== */

/* Baseball info bar uses narrower gap and can have different styling */
.mbp-live-info-bar--baseball {
  /* Gap set in inline styles (1px for baseball vs 4px for others) */
  /* You can add baseball-specific info bar styles here */
}

.mbp-live-info-bar--baseball .live-logo {
  /* Baseball-specific live badge styles */
}

.mbp-live-info-bar--baseball .live-period {
  /* Baseball-specific period text styles */
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.mbp-live-info-bar--baseball .live-minute {
  /* Baseball-specific minute styles */
  font-size: 12px;
  font-weight: 500;
  color: #c7c7c7;
  /* Monospace to prevent jumping when seconds tick */
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  display: inline-block;
  text-align: left;
}


/* ====================================
   Game Finished Message
   ==================================== */

.game-finished-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  margin: 20px 0;
  background: linear-gradient(90deg, #333338 0%, #3d3d44 100%);
  border-radius: 8px;
}

.game-finished-badge {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-tertiary);
  background: var(--bg-primary);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.game-finished-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 400px;
}

.game-finished-team {
  flex: 1 1;
  text-align: center;
}

.game-finished-team-name {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  margin: 0 auto;
}

.game-finished-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-primary);
  padding: 15px 25px;
  border-radius: 12px;
}

.game-finished-score-home,
.game-finished-score-away {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1;
  min-width: 50px;
  text-align: center;
}

.game-finished-score-separator {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #9a9a9a;
  line-height: 1;
}

.game-finished-subtext {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  color: var(--live-red);
  margin-top: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .game-finished-message {
    padding: 25px 15px;
    margin: 15px 8px;
  }

  .game-finished-scoreboard {
    gap: 12px;
  }

  .game-finished-score {
    padding: 12px 18px;
  }

  .game-finished-score-home,
  .game-finished-score-away {
    font-size: 40px;
    min-width: 40px;
  }

  .game-finished-score-separator {
    font-size: 30px;
  }

  .game-finished-team-name {
    font-size: 12px;
    max-width: 90px;
  }
}

/* ===== Skeleton Loader Styles ===== */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-pulse {
  background: linear-gradient(
    90deg,
    #2c2c2e 25%,
    #3a3a3c 50%,
    #2c2c2e 75%
  );
  background: linear-gradient(
    90deg,
    var(--bg-tertiary, #2c2c2e) 25%,
    var(--bg-quaternary, #3a3a3c) 50%,
    var(--bg-tertiary, #2c2c2e) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Header - как mb-back-info */
.skeleton-mb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background-color: var(--bg-primary);
}

.skeleton-back-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.skeleton-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-sport-name {
  width: 70px;
  height: 14px;
  border-radius: 3px;
}

.skeleton-league-name {
  width: 150px;
  height: 12px;
  border-radius: 3px;
}

/* Info bar - как mbp-live-info-bar */
.skeleton-info-bar {
  height: 80px;
  margin: 0 2px 10px 2px;
  border-radius: 4px;
}

/* Odds section - как odds-section-wrapper */
.skeleton-odds-section {
  background-color: var(--bg-secondary);
  border-radius: 4px;
  padding: 10px;
  margin: 0 2px 10px 2px;
}

.skeleton-odds-title {
  width: 100px;
  height: 14px;
  margin-bottom: 10px;
  border-radius: 3px;
}

.skeleton-odds-row {
  display: flex;
  gap: 6px;
}

.skeleton-odds-btn {
  flex: 1 1;
  height: 48px;
  border-radius: 6px;
}

/* ========== MOBILE STYLES ========== */
@media (max-width: 1023px) {
  /* На мобилке убираем border-radius для премматч */
  .mb-title-time-grid:not(.mb-title-time-grid--live) {
    border-radius: 0;
  }
}

/* ========== DESKTOP STYLES ========== */
@media (min-width: 1024px) {
  /* Live info bar - rounded top corners on desktop */
  .mbp-live-info-bar {
    border-radius: 8px 8px 0 0;
  }

  /* Live event without SCORES data - round top corners since no info bar */
  .mb-title-time-grid--live.mb-title-time-grid--no-scores {
    border-radius: 8px 8px 0 0;
  }

  .back-button:hover {
    background: var(--bg-quaternary);
  }

  /* Tabs - rounded bottom corners on desktop */
  .tabs-container {
    border-radius: 0 0 8px 8px;
  }

  /* Market cards - rounded corners on desktop */
  .ml-grid,
  .spreads-grid,
  .totals-grid,
  .team-totals-grid {
    border-radius: 0;
    overflow: hidden;
  }
}