.team-colors { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.team-colors fieldset { border: 0; padding: 0; margin: 0; min-width: 0; width: min(280px, 100%); flex: 0 1 280px; }
.team-colors legend { margin-bottom: .4rem; }
.team-color-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; width: min(280px, 100%); }
.team-color-grid button { width: 100%; height: 32px; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 3px; }
.team-color-grid button[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 1px #121212; }
.team-color-grid button:focus-visible { outline: 3px solid #ddb36b; outline-offset: 2px; }
.team-color-grid button span { color: white; text-shadow: 0 1px 2px black, 1px 0 2px black; }
.team-color-preview { display: flex; align-items: center; gap: 12px; }
.team-color-preview .match-art { width: 72px; height: 76px; }
.team-color-preview img { image-rendering: pixelated; object-fit: contain; }