/* Hit Rates: recent-form screener. The panel itself reuses the .expert-panel
   layout classes directly (see templates/components/filters.html), so this
   file only needs the per-row result badge -- sits in the league/meta line
   next to the S (Similar Games) / E (Expert Mode reference) badges, same
   sizing language as .similar-games-badge -- plus the Last N games/Min %/
   Max % number fields, plain native <input> otherwise unlike the Market
   dropdown next to them (see custom-select.js). Same look and green hover
   as the main filter bar's rounded fields, same hardcoded dark colors as
   .date-picker-trigger there for the same reason: this app is dark-only
   but var(--ink)/var(--page) only flip via the OS's prefers-color-scheme,
   not the app's own forced data-theme="dark". */
#hit-rates-last-n, #hit-rates-min-pct, #hit-rates-max-pct {
  font: inherit;
  color: #f3f5f7 !important;
  background: #11181e !important;
  border: 1px solid #465661 !important;
  border-radius: 7px;
  padding: 5px 8px;
  width: 70px;
  box-sizing: border-box;
}
#hit-rates-last-n:hover, #hit-rates-last-n:focus-visible,
#hit-rates-min-pct:hover, #hit-rates-min-pct:focus-visible,
#hit-rates-max-pct:hover, #hit-rates-max-pct:focus-visible {
  background: linear-gradient(90deg, rgba(34, 197, 94, .22), rgba(34, 197, 94, .03)) !important;
  border-color: rgba(34, 197, 94, .45) !important;
  outline: none;
}

.hit-rate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 15px;
  margin-left: 8px;
  padding: 0 5px;
  border: 1px solid #38bdf8;
  border-radius: 999px;
  background: rgba(56, 189, 248, .14);
  color: #38bdf8;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
}