.preferences {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 13px;
}

.preference-select {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
}

.preference-select select {
  min-height: 33px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: .8rem;
}

[data-court="ny"] {
  --canvas: #f0f4f8;
  --paper: #fbfdff;
  --ink: #13273d;
  --muted: #455b70;
  --line: #cfdae3;
  --teal: #1b4d79;
  --pink: #a22442;
  --peach: #f9dbe0;
  --mint: #ddebfb;
  --yellow: #ffebcb;
  --court-warm: #f7cbd5;
  --court-middle: #e9eff9;
  --court-cool: #c9def7;
}

[data-court="midwest"] {
  --canvas: #eef0e7;
  --paper: #fffdf2;
  --ink: #20352d;
  --muted: #4c6458;
  --line: #d1dcc9;
  --teal: #215f52;
  --pink: #2f684d;
  --peach: #eedac6;
  --mint: #dae9d9;
  --yellow: #fff0c6;
  --court-warm: #e9d7b9;
  --court-middle: #f3ebd1;
  --court-cool: #c9dfca;
}

[data-court="cali"] {
  --canvas: #f5f6ec;
  --paper: #fffefa;
  --ink: #1c3440;
  --muted: #435d6b;
  --line: #d5e0df;
  --teal: #146079;
  --pink: #875418;
  --peach: #f7dfb7;
  --mint: #d9edf8;
  --yellow: #fce7a7;
  --court-warm: #f7d68f;
  --court-middle: #fff1be;
  --court-cool: #c1e5f7;
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) .header {
  background: var(--paper);
  border-color: var(--line);
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) :is(.matchup,.tutorial-matchup) {
  border-color: var(--line);
  background: linear-gradient(116deg,var(--court-warm),var(--court-middle) 48%,var(--court-cool));
}

[data-court="ny"] .matchup {
  background: repeating-linear-gradient(115deg, transparent 0 36px, #1b4d790a 36px 38px),
    linear-gradient(116deg,var(--court-warm),var(--court-middle) 48%,var(--court-cool));
}

[data-court="midwest"] .matchup {
  background: repeating-linear-gradient(0deg, transparent 0 22px, #77634512 22px 23px),
    linear-gradient(116deg,var(--court-warm),var(--court-middle) 48%,var(--court-cool));
}

[data-court="cali"] .matchup {
  background: radial-gradient(circle at 15% 100%,#ffd078 0 8%,transparent 25%),
    linear-gradient(116deg,var(--court-warm),var(--court-middle) 48%,var(--court-cool));
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) .registration-photo {
  background-blend-mode: luminosity;
  background-color: var(--court-cool);
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) :is(.btn.secondary,.match-center > span,.registration-field input) {
  border-color: var(--line);
  background: var(--paper);
  color: var(--teal);
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) .btn.primary:hover:not(:disabled) {
  background: color-mix(in srgb,var(--pink),#101a24 16%);
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) :is(.registration-mode button[aria-pressed="true"],.registration-team.is-selected) {
  border-color: var(--line);
  background: var(--mint);
  color: var(--teal);
}

:is([data-court="ny"],[data-court="midwest"],[data-court="cali"]) :is(button,input,select,a,summary):focus-visible {
  outline-color: var(--pink);
}