/* keep the suggestion box neatly attached */
#sug-player1 > .list-group,
#sug-player2 > .list-group {
  max-height: 18rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: .5rem;
}

/* anchor container (safety if HTML class missing) */
#sug-player1, #sug-player2 {
  position: relative;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.navbar-brand img { max-height: 80px; }

.card { border-radius: 1rem; }

.suggestion-item {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.suggestion-item:focus,
.suggestion-item:hover {
  outline: 2px solid rgba(0,0,0,.1);
  outline-offset: -2px;
  cursor: pointer;
}

@media (max-width: 576px) {
  /* Use ONE of these two depending on whether you add class="nav-logo" to the <img> */
  .nav-logo { max-height: 56px; } 
  /* .navbar-brand img { max-height: 56px; } */

  label img { width: 20px; height: 20px; }

  h1.display-5 { font-size: 2rem; }           /* shrink a bit on tiny screens */
  .card-body { padding: 2rem 1rem; }           /* less side padding on phones */
}