.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.54);
}

.player-selection-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 31;
  display: flex;
  flex-direction: column;
  width: min(100vw, 520px);
  padding: calc(env(safe-area-inset-top) + 14px) 12px
    calc(env(safe-area-inset-bottom) + 16px);
  overflow: hidden;
  color: var(--text-main);
  background: linear-gradient(180deg, #1D1D1E 0%, #650B0A 42%, #1D1D1E 100%);
  box-shadow: -20px 0 52px rgba(0, 0, 0, 0.46);
}

.player-selection-drawer.is-entering {
  animation: drawer-enter 220ms ease-out both;
}

.selection-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 48px;
}

.selection-header button {
  border: 0;
  color: var(--text-main);
  background: transparent;
  font-size: 42px;
  line-height: 1;
}

.selection-header strong {
  justify-self: center;
  font-size: 20px;
}

@keyframes drawer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}