/* Operator artwork supplies the visible name and the accessible image label. */
.bgg-operator-logo {
  display: inline-flex;
  flex: 0 0 auto;
  width: 144px;
  aspect-ratio: 15 / 7;
  overflow: hidden;
  border: 1px solid #dce3e9;
  border-radius: 10px;
  background: #fff;
  vertical-align: middle;
}
.bgg-operator-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.operator-card .operator-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "logo rating" "meta meta";
  align-items: center;
  gap: 12px 16px;
}
.operator-card .bgg-operator-brand {
  grid-area: logo;
  margin: 0;
  line-height: 1;
  min-width: 0;
}
.operator-card .bgg-operator-brand .bgg-operator-logo { width: 160px; }
.operator-card .operator-header > .operator-info { grid-area: meta; min-width: 0; }
.operator-card .operator-header > .operator-rating {
  grid-area: rating;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}
h3.bgg-operator-heading, h1.bgg-operator-title, .bgg-table-operator {
  display: flex;
  align-items: center;
  gap: 14px;
}
h3.bgg-operator-heading { flex-wrap: wrap; }
.bgg-operator-context {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: #eaf0f5;
  color: #526477;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}
.bgg-operator-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #e6fff9;
  color: #00715c;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
h1.bgg-operator-title { gap: 24px; }
h1.bgg-operator-title > .bgg-operator-logo { width: 168px; border-radius: 12px; }
.bgg-review-title { min-width: 0; overflow-wrap: break-word; }
.guide-card h3.bgg-operator-heading { margin-bottom: 16px; }
.bgg-table-operator .bgg-operator-logo { width: 104px; border-radius: 6px; }
.bgg-operator-list-label {
  display: inline-flex;
  align-items: center;
  margin: 6px 12px 6px 0;
  vertical-align: middle;
}
.bgg-operator-list-label .bgg-operator-logo { width: 112px; border-radius: 8px; }
.no-results[hidden] { display: none; }
@media (max-width: 600px) {
  .operator-card .bgg-operator-brand .bgg-operator-logo { width: 136px; }
  h3.bgg-operator-heading { gap: 12px; }
  h3.bgg-operator-heading > .bgg-operator-logo { width: 128px; border-radius: 8px; }
  h1.bgg-operator-title { flex-direction: column; align-items: flex-start; gap: 16px; }
  h1.bgg-operator-title > .bgg-operator-logo { width: 144px; }
}