:root {
  --live-bg: #0f1114;
  --live-surface: #1a1d21;
  --live-surface-2: #252a30;
  --live-border: #2f353d;
  --live-text: #e8eaed;
  --live-text-soft: #9aa3ad;
  --live-accent: #ffcd00;
  --live-accent-text: #111;
  --live-highlight: #00d4aa;
  --live-header-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--live-bg);
  color: var(--live-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.live-body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
}

.live-page {
  min-height: 100vh;
  background: var(--live-bg);
}

.live-page__header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: linear-gradient(180deg, #15181c 0%, var(--live-bg) 100%);
}

.live-page__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 8px;
}

.live-page__back,
.live-page__icon-btn {
  border: 0;
  background: transparent;
  color: var(--live-text);
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
}

.live-page__league {
  flex: 1;
  min-width: 0;
  border: 0;
  border-left: 1px solid var(--live-border);
  background: transparent;
  color: var(--live-text-soft);
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-page__actions {
  display: flex;
  gap: 4px;
}

.live-page__scoreboard {
  margin: 0 8px 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--live-surface);
  border: 1px solid var(--live-border);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

.live-page__team {
  flex: 1;
  min-width: 0;
}

.live-page__team-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.live-page__team--home .live-page__team-name { text-align: right; }
.live-page__team--away .live-page__team-name { text-align: left; }

.live-page__scoreboard > .live-page__team,
.live-page__scoreboard > .live-page__center {
  display: inline-block;
  vertical-align: middle;
}

.live-page__scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  align-items: center;
}

.live-page__team--home { grid-column: 1; grid-row: 1; }
.live-page__center { grid-column: 2; grid-row: 1; text-align: center; }
.live-page__team--away { grid-column: 3; grid-row: 1; }

.live-page__clock {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--live-surface-2);
  margin-bottom: 6px;
}

.live-page__score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.live-page__score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  min-width: 64px;
  justify-content: center;
}

.live-page__jersey {
  width: 20px;
  height: 24px;
  border-radius: 3px;
}

.live-page__jersey--home { background: #de1212; }
.live-page__jersey--away { background: #8cb8fa; }

.live-page__stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--live-border);
}

.live-page__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--live-text-soft);
}

.live-page__incident {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  padding: 8px;
  border-radius: 6px;
  background: var(--live-surface-2);
  color: var(--live-text-soft);
}

.live-page__viz-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
}

.live-page__viz-tab {
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--live-surface-2);
  color: var(--live-text-soft);
}

.live-page__viz-tab.is-active {
  background: #2a3038;
  color: #fff;
}

.live-page__viz {
  background: #000;
}

.live-page__viz-pane {
  display: none;
  min-height: 220px;
}

.live-page__viz-pane.is-active {
  display: block;
}

.live-page__iframe {
  display: block;
  width: 100%;
  height: 234px;
  border: 0;
  background: #000;
}

.live-event__details__markets-container {
  padding: 0 8px 24px;
}

.live-page__markets-wrap {
  background: var(--live-surface);
  border-radius: 8px;
  border: 1px solid var(--live-border);
  overflow: hidden;
}

.events-tabs {
  overflow-x: auto;
  border-bottom: 1px solid var(--live-border);
}

.events-tabs-container {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 8px 8px 0;
  gap: 4px;
}

.events-tabs-container__tab__item {
  flex: 0 0 auto;
}

.events-tabs-container__tab__item__button {
  border: 0;
  background: transparent;
  color: var(--live-text-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.events-tabs-container__tab__item__button--active {
  color: #fff;
  border-bottom-color: var(--live-accent);
}

.markets--live {
  padding: 8px;
}

.markets__market {
  margin-bottom: 8px;
  padding: 12px 8px;
  border-radius: 8px;
  background: var(--live-bg);
  border: 1px solid var(--live-border);
  position: relative;
}

.markets__market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}

.markets__market-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--live-text);
}

.markets__market-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--live-accent);
  color: var(--live-accent-text);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 0 8px 0 6px;
}

.selections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selections__selection {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--live-border);
  background: var(--live-surface-2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.selections__selection--columns-2 {
  flex: 1 1 calc(50% - 8px);
}

.selections__selection--columns-1 {
  flex: 1 1 100%;
}

.selections__selection:hover:not(.is-blocked) {
  background: #30363e;
}

.selections__selection.is-selected {
  border-color: var(--live-highlight);
  background: rgba(0, 212, 170, .12);
}

.selections__selection.is-blocked {
  opacity: .55;
  cursor: not-allowed;
}

.selection-horizontal-button__title {
  font-size: 12px;
  color: var(--live-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.selections__selection .tw-text-s,
.selection-horizontal-button__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--live-highlight);
  flex-shrink: 0;
}

.live-page__loading,
.live-page__empty {
  padding: 24px;
  text-align: center;
  color: var(--live-text-soft);
  font-size: 13px;
}

.live-page__betslip-fab {
  position: fixed;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--live-accent);
  color: var(--live-accent-text);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.live-page__betslip-fab span {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}

.live-page__betslip-fab.has-items span {
  display: flex;
}

@media (min-width: 768px) {
  .live-page__iframe { height: 320px; }
  .live-event__details__markets-container {
    max-width: 752px;
    margin: 0 auto;
  }
}