/* ---- H2H tab (Flashscore-style layout, ScoreB colours) ----
   Blue #0EA5E9 = active pill / win, dark #222 = text / loss,
   grey = draw. Used by the side card and the match page. */
.h2h2 { margin: -16px; padding: 0 0 8px; background: #fff; color: #222; }

.h2h2-pills {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #ececec;
}
.h2h2-pills::-webkit-scrollbar { display: none; }

.h2h2-pill {
  flex: 0 0 auto;
  border: none;
  background: #EEEEEE;
  color: #222;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 9px 16px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.h2h2-pill.active { background: #0EA5E9; color: #fff; }

.h2h2-section[hidden], .h2h2-row[hidden], .h2h2-more[hidden], .h2h2-empty[hidden] { display: none; }

.h2h2-title {
  margin: 0;
  padding: 18px 16px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #222;
  border-bottom: 1px solid #ececec;
}

.h2h2-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  min-height: 52px;
  border-bottom: 1px solid #ececec;
  color: #222;
  text-decoration: none;
  font-size: 13.5px;
  -webkit-tap-highlight-color: transparent;
}
.h2h2-row:hover, .h2h2-row:focus-visible { background: #f5faff; outline: none; }
.h2h2-row:active { background: #e8f4fc; }

.h2h2-date { flex: 0 0 38px; font-size: 12px; color: #555; }

.h2h2-teams { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.h2h2-team { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.25; }
.h2h2-team img { flex: 0 0 18px; width: 18px; height: 18px; object-fit: contain; }
.h2h2-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h2-team.strong { font-weight: 700; }

.h2h2-note { flex: 0 0 auto; font-size: 11px; color: #888; text-transform: uppercase; white-space: nowrap; }

.h2h2-scores { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 18px; text-align: right; font-weight: 700; line-height: 1.25; }

.h2h2-res {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}
.h2h2-res.W { background: #0EA5E9; }
.h2h2-res.D { background: #F6A93B; }
.h2h2-res.L { background: #E5383B; }

.h2h2-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-bottom: 1px solid #ececec;
  background: #fff;
  color: #222;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.h2h2-more:hover { color: #0EA5E9; }
.h2h2-more i { font-size: 11px; }

.h2h2-empty { padding: 18px 16px; font-size: 13px; color: #888; border-bottom: 1px solid #ececec; }

@media (max-width: 380px) {
  .h2h2-row { gap: 8px; padding: 8px 12px; font-size: 13px; }
  .h2h2-pills, .h2h2-title { padding-left: 12px; padding-right: 12px; }
  .h2h2-pill { padding: 8px 13px; font-size: 11.5px; }
  .h2h2-date { flex-basis: 34px; font-size: 11.5px; }
}

/* dark mode */
html[data-theme="dark"] .h2h2 { background: #1b212c; color: #ccd3dc; }
html[data-theme="dark"] .h2h2-pills,
html[data-theme="dark"] .h2h2-title,
html[data-theme="dark"] .h2h2-row,
html[data-theme="dark"] .h2h2-more,
html[data-theme="dark"] .h2h2-empty { border-color: #2a3140; }
html[data-theme="dark"] .h2h2-pill { background: #28303a; color: #ccd3dc; }
html[data-theme="dark"] .h2h2-pill.active { background: #0EA5E9; color: #fff; }
html[data-theme="dark"] .h2h2-title,
html[data-theme="dark"] .h2h2-row { color: #edeff2; }
html[data-theme="dark"] .h2h2-date { color: #9ba7b9; }
html[data-theme="dark"] .h2h2-row:hover,
html[data-theme="dark"] .h2h2-row:focus-visible { background: #222a36; }
html[data-theme="dark"] .h2h2-more { background: #1b212c; color: #ccd3dc; }