/* Wiki-style infobox floated to the right of an article */
.infobox {
  float: right;
  width: 290px;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  font-size: 0.72rem;
  background: var(--md-code-bg-color);
}
.infobox .infobox-title {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-weight: 700;
  text-align: center;
  padding: 0.4rem;
  border-radius: 6px 6px 0 0;
}
.infobox table { margin: 0 !important; width: 100%; display: table; }
.infobox thead { display: none; }
.infobox td { padding: 0.25rem 0.5rem !important; }
@media (max-width: 760px) { .infobox { float: none; width: 100%; margin: 0 0 1rem 0; } }

.rarity-common    { color: #9e9e9e; font-weight: 700; }
.rarity-uncommon  { color: #4caf50; font-weight: 700; }
.rarity-rare      { color: #2196f3; font-weight: 700; }
.rarity-epic      { color: #9c27b0; font-weight: 700; }
.rarity-legendary { color: #ff9800; font-weight: 700; }
.rarity-mythic    { color: #f44336; font-weight: 700; }
.rarity-eclipse   { color: #e040fb; font-weight: 700; text-shadow: 0 0 6px #7c4dff; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.grid-cards > div { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; padding: 0.8rem; }
.grid-cards h3 { margin-top: 0; }