.match-odds{
  --match-odds-home:#0057b8;
  --match-odds-draw:#bd7b00;
  --match-odds-away:#d14a52;
}
.prob-bar{
  display:flex;
  gap:6px;
  width:100%;
  height:12px;
  overflow:visible;
  border:0;
  border-radius:999px;
  background:transparent;
}
.prob-bar.is-empty{
  overflow:hidden;
  background:#edf1f6;
}
.prob-seg{
  min-width:0;
  height:100%;
  flex-basis:0;
  border-radius:999px;
  transition:flex-grow .35s ease;
}
.prob-home{ background:var(--match-odds-home); }
.prob-draw{ background:var(--match-odds-draw); }
.prob-away{ background:var(--match-odds-away); }

.match-odds-outcomes{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr);
  align-items:start;
  gap:10px;
  margin-top:1.2rem;
}
.match-odds-outcome{
  display:grid;
  gap:5px;
  min-width:0;
}
.match-odds-outcome.is-draw{ justify-items:center; text-align:center; }
.match-odds-outcome.is-away{ justify-items:end; text-align:right; }
.match-odds-outcome-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}
.match-odds-outcome.is-draw .match-odds-outcome-head{ justify-content:center; }
.match-odds-outcome.is-away .match-odds-outcome-head{ justify-content:flex-end; }
.match-odds-team-link{
  display:inline-flex;
  flex:0 0 auto;
  color:inherit;
  text-decoration:none;
}
.match-odds-logo,
.match-odds-logo-fallback{
  width:42px;
  height:42px;
  flex:0 0 42px;
}
.match-odds-logo{ object-fit:contain; }
.match-odds-logo-fallback{
  display:grid;
  place-items:center;
  border:1px solid rgba(15,25,43,.08);
  border-radius:50%;
  background:#f4f7fb;
  color:#111827;
  font-size:.9rem;
  font-weight:800;
}
.match-odds-percent{
  color:#111827;
  font-size:clamp(1.8rem, 6vw, 2.5rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.match-odds-outcome-label{
  overflow:hidden;
  color:#111827;
  font-size:.82rem;
  font-weight:800;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.match-odds-outcome-count{
  color:#667085;
  font-size:.78rem;
  font-weight:600;
  line-height:1.2;
}
.match-odds-footer{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.15rem;
}
.match-odds-footer-stat{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
  min-width:0;
  color:#667085;
  font-size:.74rem;
  line-height:1.2;
}
.match-odds-footer-stat.is-end{
  justify-content:flex-end;
  text-align:right;
}
.match-odds-footer-label{
  font-weight:700;
}
.match-odds-footer-value{
  overflow:hidden;
  color:#111827;
  font-size:.84rem;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.match-odds-loading{ display:grid; gap:10px; }
.match-odds [hidden]{ display:none !important; }
.match-odds-skeleton{
  display:block;
  border-radius:7px;
  background:linear-gradient(90deg,#eceff3 0%,#f8fafc 46%,#eceff3 100%);
  background-size:220% 100%;
  animation:match-odds-shimmer 1.15s ease-in-out infinite;
}
@keyframes match-odds-shimmer{ to{ background-position:-220% 0; } }
.match-odds-skeleton-bar{ width:100%; height:14px; border-radius:999px; }
.match-odds-skeleton-row{ width:100%; height:22px; }
.match-odds-skeleton-meta{ width:58%; height:16px; margin-top:2px; }
.match-odds-skeleton-sample{ width:38%; height:13px; }
.match-odds-sample{ margin-top:.7rem; color:#667085; font-size:.78rem; text-align:center; }
.match-odds-team-link:hover{ transform:scale(1.04); }
.match-odds-error{ display:flex; align-items:center; justify-content:space-between; gap:12px; color:#667085; font-size:.88rem; }

@media (max-width:575.98px){
  .prob-bar{ gap:5px; height:10px; }
  .match-odds-outcomes{ gap:6px; margin-top:1rem; }
  .match-odds-outcome{ gap:4px; }
  .match-odds-outcome-head{ gap:6px; min-height:36px; }
  .match-odds-logo,
  .match-odds-logo-fallback{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .match-odds-percent{ font-size:clamp(1.55rem, 7vw, 2rem); }
  .match-odds-outcome-label{ font-size:.72rem; }
  .match-odds-outcome-count{ font-size:.7rem; }
  .match-odds-footer{ gap:.65rem; margin-top:1rem; }
  .match-odds-footer-stat{ gap:.25rem; font-size:.66rem; }
  .match-odds-footer-value{ font-size:.76rem; }
}
.group-impact-summary {
  color:#6b7280;
  font-size:.9rem;
  line-height:1.35;
}
.group-impact-list {
  display:grid;
  gap:10px;
}
.group-impact-scenario {
  display:grid;
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.07);
}
.group-impact-scenario:first-child {
  padding-top:0;
  border-top:0;
}
.group-impact-scenario-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  color:#6b7280;
  font-size:.82rem;
  line-height:1.2;
}
.group-impact-scenario-head span {
  font-weight:700;
  text-transform:uppercase;
}
.group-impact-scenario-head strong {
  color:#111827;
  font-weight:700;
  text-align:right;
}
.group-impact-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.group-impact-team {
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  color:#111827;
  font-size:.9rem;
  font-weight:600;
}
.group-impact-logo {
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}
.group-impact-fallback {
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:6px;
  background:#f3f4f6;
  color:#111827;
  font-size:.75rem;
  font-weight:700;
  flex:0 0 auto;
}
.group-impact-meta {
  display:flex;
  align-items:baseline;
  gap:8px;
  flex:0 0 auto;
  color:#6b7280;
  font-size:.85rem;
  white-space:nowrap;
}
.group-impact-meta strong {
  color:#111827;
  font-size:.95rem;
}
.match-quicknav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.match-quicknav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:#f8fafc;
  color:#111827;
  font-size:.88rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:background .22s cubic-bezier(.22, 1, .36, 1), color .22s cubic-bezier(.22, 1, .36, 1), transform .22s cubic-bezier(.22, 1, .36, 1);
}
.match-quicknav a:hover {
  background:#eef2f7;
}
.match-anchor {
  scroll-margin-top:calc(var(--header-h, 40px) + 0px);
}

.rounded-20 { border-radius: 20px; }
.border-neutral { border: 1px solid rgba(0,0,0,.06); }

.card { background: #fff; }
.match-hero-card{
  --match-sticky-ease:cubic-bezier(.22, 1, .36, 1);
  transition:
    box-shadow .38s var(--match-sticky-ease),
    border-color .38s var(--match-sticky-ease),
    background .38s var(--match-sticky-ease),
    backdrop-filter .38s var(--match-sticky-ease);
}
.match-hero-card .card-body{
  transition:padding .36s var(--match-sticky-ease);
}
.match-hero-card.is-stuck{
  overflow:hidden;
  background: rgba(255,255,255,.68) !important;
  border-color: transparent !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  box-shadow: 0 8px 32px rgba(31,38,135,.15) !important;
}
.match-hero-card.is-stuck .card-body{
  background: transparent !important;
}
.match-hero-card.is-stuck::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  opacity:.7;
}
.match-hero-card.is-stuck > *{
  position:relative;
  z-index:1;
}
.match-hero-card.is-stuck .match-score-date,
.match-hero-card.is-stuck .match-score-group,
.match-hero-card.is-stuck .match-score-status{
  opacity:0;
  max-height:0;
  margin-top:0;
  margin-bottom:0;
  transform:translateY(-5px) scale(.985);
  pointer-events:none;
}
.match-hero-card.is-stuck .card-body{
  padding-top:.8rem !important;
  padding-bottom:.8rem !important;
}
.match-hero-card.is-stuck .team-logo{
  width:44px;
  height:44px;
}
.match-hero-card.is-stuck .team-logo-fallback{
  width:42px;
  height:42px;
}
@media (prefers-color-scheme: dark){
  .match-hero-card.is-stuck{
    background: rgba(255,255,255,.07) !important;
    border-color: transparent !important;
    backdrop-filter: blur(18px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(200%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.04),
      0 12px 40px rgba(0,0,0,.45) !important;
  }

  .match-hero-card.is-stuck::before{
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    opacity:1;
  }
}
.match-section-title,
.match-team-title {
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}
.match-section-title { font-size:1.25rem; }
.match-team-title { font-size:1.5rem; }
.match-section-heading {
  margin:0 0 .65rem;
}
.scoreboard {
  border:0;
  background:transparent;
  padding:0 !important;
}
.match-score-date {
  overflow:hidden;
  max-height:28px;
  margin-bottom:6px;
  color:#6b7280;
  font-size:1rem;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
  transform-origin:center top;
  will-change:opacity, max-height, margin, transform;
  transition:
    opacity .24s cubic-bezier(.22, 1, .36, 1),
    max-height .36s cubic-bezier(.22, 1, .36, 1),
    margin .36s cubic-bezier(.22, 1, .36, 1),
    transform .36s cubic-bezier(.22, 1, .36, 1);
}
.match-score-group {
  overflow:hidden;
  max-height:34px;
  margin-bottom:12px;
  color:#6b7280;
  font-size:.88rem;
  font-weight:500;
  line-height:1.15;
  transform-origin:center top;
  will-change:opacity, max-height, margin, transform;
  transition:
    opacity .24s cubic-bezier(.22, 1, .36, 1),
    max-height .36s cubic-bezier(.22, 1, .36, 1),
    margin .36s cubic-bezier(.22, 1, .36, 1),
    transform .36s cubic-bezier(.22, 1, .36, 1);
}
.score-num {
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 400;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.score-sep {
  display:inline-block;
  margin: 0 .28rem;
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight:400;
  line-height:.9;
  opacity:.85;
}

.match-score-status {
  overflow:hidden;
  max-height:38px;
  margin-top:12px;
  color:#4b5563;
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:1.45rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  transform-origin:center top;
  will-change:opacity, max-height, margin, transform;
  transition:
    opacity .24s cubic-bezier(.22, 1, .36, 1),
    max-height .36s cubic-bezier(.22, 1, .36, 1),
    margin .36s cubic-bezier(.22, 1, .36, 1),
    transform .36s cubic-bezier(.22, 1, .36, 1);
}
.timeline { position: relative; }
.timeline-item { display:flex; align-items:flex-start; gap:10px; padding:16px 0; border-bottom:0; }
.timeline-item:not(.is-away):not(.is-system-line) {
  margin-left:-10px;
  padding-right:24px;
}
.timeline-item.is-away {
  flex-direction: row-reverse;
  margin-right:-10px;
  padding-left:24px;
  text-align:right;
}
.timeline-item.is-system-line {
  display:block;
  padding:14px 0 16px;
  margin-left:0;
  margin-right:0;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-system-line {
  display:grid;
  grid-template-columns:minmax(42px, 1fr) auto minmax(42px, 1fr);
  align-items:center;
  gap:clamp(12px, 4vw, 42px);
  width:100%;
  color:#6b7280;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
  text-transform:uppercase;
}
.timeline-system-line::before,
.timeline-system-line::after {
  content:"";
  height:1px;
  border-radius:999px;
  background:rgba(17,24,39,.06);
}
.timeline-system-line span {
  white-space:nowrap;
}
.timeline-minute {
  flex:0 0 32px;
  min-height:30px;
  color:#6b7280;
  font-size:.78rem;
  font-weight:600;
  line-height:30px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.timeline-item.is-away .timeline-minute {
  text-align:left;
}
.timeline-dot {
  flex:0 0 30px;
  height:30px;
  width:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  font-size:18px;
  line-height:1;
}
.timeline-dot.is-goal{ font-size:20px; }
.timeline-dot.is-red-card,
.timeline-dot.is-yellow-card{
  font-size:0;
  position:relative;
}
.timeline-dot.is-red-card::before,
.timeline-dot.is-yellow-card::before{
  content:"";
  display:block;
  width:13px;
  height:19px;
  border-radius:2px;
  transform:rotate(-7deg);
  box-shadow:0 1px 2px rgba(15,23,42,.22);
}
.timeline-dot.is-yellow-card::before{
  background:#ffd51f;
  border:1px solid rgba(146,99,0,.18);
}
.timeline-dot.is-red-card::before{
  background:#ef233c;
  border:1px solid rgba(127,29,29,.18);
}
.timeline-content { flex:1 1 auto; min-width:0; }
.timeline-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.timeline-item.is-away .timeline-head {
  flex-direction: row-reverse;
}
.timeline-player {
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:1.18rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}
.timeline-player-link {
  color:inherit;
  text-decoration:none;
}
.timeline-player-link:hover,
.timeline-player-link:focus-visible {
  text-decoration:underline;
  text-underline-offset:3px;
}
.event-label {
  display:inline-flex;
  width:max-content;
  margin-top:4px;
  color:#6b7280;
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}
.timeline-item.is-away .event-label {
  margin-left:auto;
}
.skeleton-line { height: 14px; border-radius: 8px; background: linear-gradient(90deg,#eee,#f7f7f7,#eee); animation: shimmer 1.2s infinite; margin: 8px 0; }
@keyframes shimmer { 0%{background-position:-200px 0} 100%{background-position:200px 0} }
.match-events-loading{ display:grid; gap:4px; }
.match-events-error{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.4rem 0;
  color:#667085;
  font-size:.88rem;
}
.match-events-error[hidden]{ display:none !important; }

.bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

.team-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  will-change:width, height, transform;
  transition:width .36s cubic-bezier(.22, 1, .36, 1), height .36s cubic-bezier(.22, 1, .36, 1), transform .36s cubic-bezier(.22, 1, .36, 1);
}
.team-logo-fallback{
  width:56px;
  height:56px;
  will-change:width, height, transform;
  transition:width .36s cubic-bezier(.22, 1, .36, 1), height .36s cubic-bezier(.22, 1, .36, 1), transform .36s cubic-bezier(.22, 1, .36, 1);
}
.d-flex.align-items-center > *{ align-self:center; }

.team-link{ cursor:pointer; }
.team-link:hover .h4{ text-decoration: underline; }

.match-content-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:1rem;
  align-items:start;
}
.match-content-main,
.match-content-sidebar,
.match-squads{
  min-width:0;
}
.match-squad-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:1rem;
}
.match-squad-card{
  height:100%;
}
.match-squad-team{
  margin:0 0 .8rem;
  font-family:'World Condensed', 'Causten', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:1.15rem;
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.match-squad-team a,
.match-squad-player{
  color:inherit;
  text-decoration:none;
}
.match-squad-team a:hover,
.match-squad-team a:focus-visible,
.match-squad-player:hover,
.match-squad-player:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
}
.match-squad-table-wrap{
  overflow:visible;
}
.match-squad-table{
  width:100%;
  table-layout:fixed;
  font-size:.9rem;
}
.match-squad-table > :not(caption) > * > *{
  padding:.3rem 0;
  border:0;
  line-height:1.25;
}
.match-squad-table thead th{
  padding-top:0;
  padding-bottom:.45rem;
  color:var(--bs-secondary-color, #6b7280);
  font-size:.72rem;
  font-weight:600;
  text-align:left;
}
.match-squad-table .match-squad-number{
  width:2.5rem;
  padding-right:.65rem;
  color:var(--bs-secondary-color, #6b7280);
  font-variant-numeric:tabular-nums;
}
.match-squad-table .match-squad-stat{
  width:2rem;
  padding-right:.1rem;
  padding-left:.1rem;
  color:var(--bs-secondary-color, #6b7280);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  text-align:center;
}
.match-squad-table td.match-squad-stat.has-value{
  color:var(--bs-body-color, #111827);
  font-weight:800;
}
.match-squad-table td.match-squad-stat.is-yellow.has-value{
  color:#a16207;
}
.match-squad-table td.match-squad-stat.is-red.has-value{
  color:#dc2626;
}
.match-squad-card-icon{
  display:inline-block;
  width:.48rem;
  height:.68rem;
  border-radius:2px;
  transform:rotate(-6deg);
  vertical-align:-.08rem;
}
.match-squad-card-icon.is-yellow{
  background:#eab308;
}
.match-squad-card-icon.is-red{
  background:#dc2626;
}
html[data-theme="dark"] .match-squad-table td.match-squad-stat.is-yellow.has-value{
  color:var(--evi-warning, #fbbf24);
}
html[data-theme="dark"] .match-squad-table td.match-squad-stat.is-red.has-value{
  color:var(--evi-danger, #fb7185);
}
html[data-theme="dark"] .match-squad-card-icon.is-yellow{
  background:var(--evi-warning, #fbbf24);
}
html[data-theme="dark"] .match-squad-card-icon.is-red{
  background:var(--evi-danger, #fb7185);
}
.match-squad-name-cell{
  display:flex;
  align-items:baseline;
  gap:.35rem;
  min-width:0;
}
.match-squad-player{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.match-squad-position{
  flex:0 0 auto;
  color:var(--bs-secondary-color, #6b7280);
  font-size:.8rem;
}
.match-squad-empty{
  color:var(--bs-secondary-color, #6b7280) !important;
}

@media (min-width: 992px){
  .match-content-grid{
    grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
    gap:1.5rem;
  }
  .match-content-main{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:1.5rem;
  }
}

@media (max-width: 575.98px){
  .match-hero-card{
    position:sticky;
    top:calc(var(--header-h, 56px) + 8px);
    z-index:30;
  }
  .match-anchor {
    scroll-margin-top:calc(var(--header-h, 56px) + 103px);
  }
  .team-logo{ width:55px; height:55px; }
  .team-logo-fallback{ width:48px; height:48px; }
  .scoreboard-wrap{ flex:0 0 170px !important; }
  .score-num{ font-size:38px; }
  .score-sep{ font-size:30px; }
  .scoreboard{ padding:0 !important; }
  .match-score-date{ margin-bottom:5px; font-size:.9rem; }
  .match-score-group{ margin-bottom:9px; font-size:.78rem; }
  .match-score-status{ margin-top:9px; font-size:1.15rem; }
  .match-team-title{ font-size:1.2rem; }
  .timeline-player{ font-size:.98rem; }
  .match-section-title{ font-size:1.05rem; }
  .group-impact-scenario-head{ flex-direction:column; gap:3px; }
  .group-impact-scenario-head strong{ text-align:left; }
  .group-impact-meta{ gap:6px; font-size:.8rem; }
  .match-quicknav {
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    margin-top:16px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .match-quicknav::-webkit-scrollbar{ display:none; }
  .match-quicknav a{ min-height:32px; padding:7px 11px; font-size:.82rem; }
  .timeline-head{ flex-direction:column; gap:3px; }
  .timeline-minute{ flex-basis:28px; }
  .timeline-item{ padding:14px 0; }
  .timeline-item:not(.is-away):not(.is-system-line){ margin-left:-10px; padding-right:14px; }
  .timeline-item.is-away{ margin-right:-10px; padding-left:14px; }
  .timeline-item.is-system-line{ padding:12px 0 14px; }
  .timeline-system-line{ font-size:.78rem; gap:10px; }
  .timeline-item.is-away .timeline-head{ flex-direction:column; align-items:flex-end; }
  .timeline-item.is-home .timeline-head{ align-items:flex-start; }
  .match-squad-table{ font-size:.86rem; }
  .match-squad-table .match-squad-number{ width:2.2rem; padding-right:.4rem; }
  .match-squad-table .match-squad-stat{ width:1.75rem; }
}
