/* Original competition crests share their category shape across all result tiers. */
.competition-symbol { display: inline-block; flex: 0 0 auto; width: 1.7rem; height: 1.7rem; vertical-align: middle; }
.competition-symbol.tier-silver { color: #b8c5d1; }
.competition-symbol.tier-gold { color: #e0b244; }
.competition-symbol.tier-mythic { color: #ee792b; }
.magic-card.has-competition .magic-type {
  width: min(var(--type-width), max(0px, calc(var(--symbol-left) - var(--symbol-gap) - var(--type-left))));
}
.magic-competition {
  position: absolute; top: var(--symbol-top); left: var(--symbol-left);
  width: var(--symbol-width); height: var(--symbol-height); z-index: 3;
}
.appearance-competition { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.appearance-competition .appearance-category { margin: 0; }
.competition-key { margin: 0 0 1.4rem; color: var(--muted); font: .8rem/1.45 system-ui, sans-serif; }
.competition-key summary { width: fit-content; max-width: 100%; cursor: pointer; color: var(--link); }
.competition-key summary:focus-visible { outline: 3px solid #a984cc; outline-offset: 3px; }
.competition-key[open] summary { margin-bottom: .65rem; }
.competition-key-content { max-width: 850px; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; }
.competition-key-content p { margin: 0 0 .5rem; }
.competition-key ul { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; padding: 0; margin: .5rem 0; list-style: none; }
.competition-key li { display: inline-flex; align-items: center; gap: .35rem; }
.competition-key .competition-symbol { width: 1.4rem; height: 1.4rem; }
.competition-key .competition-category-key { border-top: 1px solid var(--rule); padding-top: .65rem; margin-top: .65rem; }