.page-background { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at top left, rgb(184 243 74 / 14%), transparent 35%), radial-gradient(circle at bottom right, rgb(56 189 248 / 12%), transparent 30%); }
.player-row { transition: background-color 150ms ease; }
.player-row:hover { background-color: rgb(16 185 129 / 10%); }
.dark .player-row:hover { background-color: rgb(184 243 74 / 14%); }
.leader-name { text-decoration: underline currentColor 2px; text-underline-offset: 4px; }

.autocomplete-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid rgb(203 213 225);
  border-radius: .75rem;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 16px 35px rgb(15 23 42 / 18%);
}

.dark .autocomplete-list { border-color: rgb(255 255 255 / 12%); background: rgb(15 23 42 / 98%); }
.autocomplete-option { display: block; width: 100%; padding: .65rem .8rem; text-align: left; font: 600 .875rem ui-monospace, monospace; }
.autocomplete-option:hover, .autocomplete-option[aria-selected="true"] { background: rgb(16 185 129 / 12%); }
.dark .autocomplete-option:hover, .dark .autocomplete-option[aria-selected="true"] { background: rgb(184 243 74 / 14%); }

.field-error {
  border-color: rgb(239 68 68) !important;
  box-shadow: 0 0 0 4px rgb(239 68 68 / 14%) !important;
}

@media (min-width: 1280px) {
  .page-shell {
    padding-inline: 2rem;
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  }

}

.results-grid {
  grid-template-columns: repeat(auto-fill, 400px);
  justify-content: end;
}

@media (max-width: 639px) {
  #results.results-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}